el-table在鼠标移动到单元格时变为下拉框,否则是普通文本

el-table将多个单元格改为下拉框,导致渲染卡顿,解决方法在鼠标移动到单元格时变为下拉框,否则是普通文本

复制代码
<el-table-column label="显示方向" width="150px" align="center" key="direction" prop="direction"
                         :show-overflow-tooltip="true">
          <template #default="{ row, $index }">
            <el-select v-if="row.showDropdown" v-model="row.direction" placeholder="请选择">
              <el-option v-for="item in directionList " :key="item.dictCode" :value="item.dictValue"
                         :label="item.dictLabel"></el-option>
            </el-select>
            <div v-else @mouseover="handleMouseOver(row)" @mouseleave="handleMouseLeave(row)" style="min-height: 20px;">
              {{ getLabelFromOptions(directionList, row.direction) }}
            </div>
          </template>
        </el-table-column>

js代码

复制代码
<script setup>
const directionList = ref([{ "dictCode": 1, "dictLabel": "左", "dictValue": "left"}, { "dictCode": 2, "dictLabel": "右", "dictValue": "right"},]);//显示方向

//鼠标移入下拉框
const handleMouseOver = (row) => {
  row.showDropdown = true;
};
//鼠标移出下拉框
const handleMouseLeave = (row) => {
  row.showDropdown = false;
};

//下拉框根据value获取label
function getLabelFromOptions(options, value) {
  const option = options.find(opt => opt.dictValue === value);
  return option ? option.dictLabel : '';
}
</script>

效果如图

相关推荐
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956393 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的3 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im3 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript