踩坑
处理关闭原来已选项为关闭时也会触发checkChange,造成错误的效果
解决,感觉有点复杂
html
<el-tree
ref="tree"
node-key="id"
class="custom-tree"
:data="directoryTreeData"
:props="defaultProps"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
>
</el-tree>
tree data
const DIRECTORY_TREE_DATA = [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
}
]
vue data
data() {
return {
defaultProps: {
children: 'children',
label: 'label'
},
directoryTreeData: DIRECTORY_TREE_DATA,
selectTreeId: '',
closeSelectTreeId: ''
}
},
vue methonds
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate)
const nowKeyId = data.id
console.log(checked)
// 主动关闭之前的节点造成的触发
if (nowKeyId === this.closeSelectTreeId) {
this.closeSelectTreeId = ''
// 不做操作
return
} else if (!checked) {
this.selectTreeId = ''
this.closeSelectTreeId = ''
this.$refs.tree.setCheckedKeys([])
} else {
// 选中状态
// 获取之前选中
const selectTreeId = this.selectTreeId
// 如果之前存在一个选中
if (selectTreeId !== '') {
// 标记为关闭节点,用于后面触发后判断
this.closeSelectTreeId = selectTreeId
this.$refs.tree.setChecked(selectTreeId, false)
}
// 设置当前选中
this.selectTreeId = nowKeyId
}
}
}