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

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

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;
}
相关推荐
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_2 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD2 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
丁浩6662 小时前
Python机器学习---2.算法:逻辑回归
python·算法·机器学习
要加油哦~3 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
伏小白白白3 小时前
【论文精度-2】求解车辆路径问题的神经组合优化算法:综合展望(Yubin Xiao,2025)
人工智能·算法·机器学习
哆啦A梦15883 小时前
axios 的二次封装
前端·vue.js·node.js
无敌最俊朗@3 小时前
数组-力扣hot56-合并区间
数据结构·算法·leetcode
阿珊和她的猫3 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo3 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端