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

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

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;
}
相关推荐
m0_7369191030 分钟前
C++中的享元模式变体
开发语言·c++·算法
罗湖老棍子37 分钟前
【 例 1】石子合并(信息学奥赛一本通- P1569)
数据结构·算法·区间dp·区间动态规划·分割合并
换日线°44 分钟前
前端炫酷展开效果
前端·javascript·vue
wangluoqi1 小时前
26.2.4练习总结
算法
流㶡1 小时前
逻辑回归实战:从原理到不平衡数据优化(含欠拟合/过拟合诊断与召回率提升)
算法·机器学习·逻辑回归
Tisfy1 小时前
LeetCode 3637.三段式数组 I:一次遍历(三种实现)
算法·leetcode·题解·模拟·数组·遍历·moines
遨游xyz1 小时前
数据结构-哈希表
算法·哈希算法
夏幻灵1 小时前
过来人的经验-前端学习路线
前端
dyyx1111 小时前
C++中的过滤器模式
开发语言·c++·算法
CappuccinoRose2 小时前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router