彭州建设网站,网站建设补充范本,手机网站解决方案,安装wordpress时出现空白el-table将多个单元格改为下拉框#xff0c;导致渲染卡顿#xff0c;解决方法在鼠标移动到单元格时变为下拉框#xff0c;否则是普通文本
el-table-column label显示方向 width150px aligncenter keydirection prop导致渲染卡顿解决方法在鼠标移动到单元格时变为下拉框否则是普通文本
el-table-column label显示方向 width150px aligncenter keydirection propdirection:show-overflow-tooltiptruetemplate #default{ row, $index }el-select v-ifrow.showDropdown v-modelrow.direction placeholder请选择el-option v-foritem in directionList :keyitem.dictCode :valueitem.dictValue:labelitem.dictLabel/el-option/el-selectdiv v-else mouseoverhandleMouseOver(row) mouseleavehandleMouseLeave(row) stylemin-height: 20px;{{ getLabelFromOptions(directionList, row.direction) }}/div/template/el-table-columnjs代码
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效果如图
