element plus或者element UI的一些疑难杂症

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=" "事件动态数据刷新问题]