项目场景:
elementui组件中,树形组件的使用
问题描述:
通过树形结构展示,点击勾选数据。没有展开树结构的情况下,勾选树节点时,其叶子节点全部被勾选,@check-change=“handleCheckChange”,叶子没有响应check-change函数
<el-dialog
title="短信接受对象选择"
:visible.sync="dialogVisible"
width="40%"
:close-on-click-modal="false">
<el-row class="person-selected" :gutter="20">
<div v-for="person in nameList" :key="person.key">
{{ person.name }}
<i class="el-icon-close" @click="eventPersonRemove(person.key)"></i>
</div>
</el-row>
<el-row>
<el-tree
:data="data"
show-checkbox
node-key="id"
ref="tree"
:render-after-expand=false
highlight-current
@check-change="handleCheckChange">
</el-tree>
</el-row>
<el-row class="form-footer">
<el-button @click="resetChecked">重 置</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</el-row>
</el-dialog>
return {
dialogVisible: false,
data: [
{
id: 2,
label: '研发部',
isLeaf: false,
children: [{
id: 5,
label: '王五',
isLeaf: true,
}, {
id: 6,
label: '赵六',
isLeaf: true,
}]
}, {
id: 3,
label: '综合部',
isLeaf: false,
children: [{
id: 7,
label: '张三',
isLeaf: true,
}, {
id: 8,
label: '李四',
isLeaf: true,
}]
}],
nameList:[],
defaultProps: {
children: 'children',
label: 'label'
},
}
原因分析:
elementUI的tree控件,其属性render-after-expand(默认为true) 是否在第一次展开某个树节点后才渲染其子节点,应绑定为false,不展开节点也渲染其子节点。
解决方案:
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
handleCheckChange(data, checked, indeterminate) {
// console.log(data.label)
let self = this;
if (checked === false){
for (let i = 0; i < self.nameList.length; i++) {
if (self.nameList[i].key === data.id){
self.nameList.splice(i, 1);
break;
}
}
}else {
if (data.isLeaf) {
self.nameList.push({name:data.label, key:data.id})
}
}
},
.person-selected {
padding: 10px;
div {
position: relative;
float: left;
min-width: 100px;
height: 30px;
padding: 0 20px;
margin: 0 10px 10px 0;
line-height: 30px;
color: #fff;
text-align: center;
background-color: #0a8d4f;
border-radius: 15px;
i {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 30px;
line-height: 30px;
text-align: left;
z-index: 1;
}
}
}