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 天前
实现最大异步并发执行队列
javascript
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军1 天前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy1 天前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端1 天前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 天前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL1 天前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉1 天前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 天前
v-model与-sync的演变和融合
前端·javascript·vue.js