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

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

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;
}
相关推荐
Dwzun4 分钟前
基于SpringBoot+Vue的体重管理系统【附源码+文档+部署视频+讲解)
vue.js·spring boot·后端
元直数字电路验证11 分钟前
Jakarta EE Web 聊天室技术梳理
前端
wadesir14 分钟前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛14 分钟前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠16 分钟前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4817 分钟前
前端动画性能优化
前端
网络点点滴19 分钟前
Vue3嵌套路由
前端·javascript·vue.js
牧码岛30 分钟前
Web前端之Vue+Element打印时输入值没有及时更新dom的问题
前端·javascript·html·web·web前端
小二李37 分钟前
第8章 Node框架实战篇 - 文件上传与管理
前端·javascript·数据库
HIT_Weston1 小时前
45、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 分析(二)
前端·http·gitlab