前端性能优化,给录音播放的列表加个播放按键,点击之后再播放录音。减少页面的渲染录音文件数量过多导致加载缓慢

给录音播放的列表加个播放按键,点击之后再播放录音。减少页面的渲染录音文件数量过多导致加载缓慢

javascript 复制代码
 <ElTable.TableColumn
          align="center"
          label="录音音频播放"
          prop="recordLocationUrl"
          min-width="320"
        >
          <template #default="{ row }">
            <div v-if="row.isplay === true">
              <audio ref="audio" controls :src="row.recordLocationUrl" />
            </div>
            <ElButton
              v-else
              @click="clickaudio(row)"
              :disabled="row.recordLocationUrl ? false : true"
            >
              播放录音音频
            </ElButton>
          </template>
        </ElTable.TableColumn>


function clickaudio(elem: any) {
  elem.isplay = true;
}
相关推荐
陈随易10 分钟前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
王老师青少年编程20 分钟前
csp信奥赛C++高频考点专项训练之贪心算法 --【哈夫曼贪心】:合并果子
c++·算法·贪心·csp·信奥赛·哈夫曼贪心·合并果子
冰暮流星28 分钟前
javascript之事件代理/事件委托
前端
叼烟扛炮1 小时前
C++第二讲:类和对象(上)
数据结构·c++·算法·类和对象·struct·实例化
天疆说1 小时前
【哈密顿力学】深入解读航天器交会最优控制中的Hamilton函数
人工智能·算法·机器学习
@yanyu6661 小时前
登录注册功能-明文
vue.js·springboot
陈随易2 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
wuweijianlove2 小时前
关于算法设计中的代价函数优化与约束求解的技术7
算法
leoufung2 小时前
LeetCode 149: Max Points on a Line - 解题思路详解
算法·leetcode·职场和发展
样例过了就是过了2 小时前
LeetCode热题100 最长公共子序列
c++·算法·leetcode·动态规划