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

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

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;
}
相关推荐
终将老去的穷苦程序员几秒前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
05候补工程师1 分钟前
【408考研复习】数据结构核心笔记:字符串模式匹配与内部排序算法全解析
数据结构·经验分享·笔记·考研·算法·排序算法
之歆4 分钟前
Day10_Node.js 与 Express 开发实战指南:从零到一构建专业级 Web 服务
前端·node.js·express
阿文的代码库4 分钟前
浅谈:无向图的欧拉回路
算法
-Thinker5 分钟前
AI 算法核心原理与实现
人工智能·算法·机器学习
问心无愧05136 分钟前
ctf show web入门107
android·前端·笔记·android studio
Eloudy7 分钟前
最小权重完美匹配(MWPM)与表面码纠错
算法·量子计算
-森屿安年-8 分钟前
62. 不同路径
算法·动态规划
2301_815645389 分钟前
react
前端·react.js
FirstFrost --sy13 分钟前
基于高并发服务器的web小游戏测试
服务器·前端·javascript·c++·python·集成测试