1、el-tree单选需要判断是否可点，并展示禁用样式，element plus中要想直接使用禁用样式需要搭配复选框进行显示的，但是我们业务需求是单选，
const defaultProps = {
children: 'children',
label: 'name',
disabled: 'disabled',
class:customNodeClass,
}
const customNodeClass = data => {
if (data.disabled) {
return 'is-penultimate'
}
return null
}
:deep(.is-penultimate > .el-tree-node__content) {
color: #ccc;
cursor: not-allowed !important;
}
图示：
image.png
2.form表单不校验的问题
const changePwdForm = reactive({
oldPassword: null,
pass: null,
checkPass: null,
}) //初始化数据如果填写为null的话form表单不校验
//正确应该如下
const changePwdForm = reactive({
oldPassword: '',
pass: '',
checkPass: '',
})
3.table复选框回显不生效问题
加载数据之前先this.$refs.multipleTable.clearSelection();
之后匹配要会显得数据
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(this.table.tableData.find(item => { return row.id == item.id; }),true);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
4.el-popver 弹出框收线问题解决 增加popper-options
image.png
<el-popover placement="right" :width="900" trigger="click" :popper-options="{ modifiers: [{ enabled: true }], strategy: 'fixed', placement: 'auto' }">
<template #reference>
<el-button style="margin-right: 16px">Click to activate</el-button>
</template>
<ul>
<li v-for="i in 10" :key="i">{{ i }}</li>
</ul>
</el-popover>
5.# [el-table，type='expand'展开行，@expand-change=" "事件动态数据刷新问题]
