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

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

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;
}
相关推荐
2301_8227032010 小时前
Flutter 框架跨平台鸿蒙开发 - 创意声音合成器应用
算法·flutter·华为·harmonyos·鸿蒙
一袋米扛几楼9810 小时前
【网络安全】SIEM -Security Information and Event Management 工具是什么?
前端·安全·web安全
cmpxr_11 小时前
【C】数组名、函数名的特殊
c语言·算法
小陈工11 小时前
2026年4月7日技术资讯洞察:下一代数据库融合、AI基础设施竞赛与异步编程实战
开发语言·前端·数据库·人工智能·python
KAU的云实验台11 小时前
【算法精解】AIR期刊算法IAGWO:引入速度概念与逆多元二次权重,可应对高维/工程问题(附Matlab源码)
开发语言·算法·matlab
Cobyte11 小时前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理
前端·javascript·vue.js
会编程的土豆11 小时前
【数据结构与算法】再次全面了解LCS底层
开发语言·数据结构·c++·算法
竹林81811 小时前
从零到一:在React前端中集成The Graph查询Uniswap V3池数据实战
前端·javascript
Mintopia11 小时前
别再迷信"优化":大多数性能问题根本不在代码里
前端