1、element+vue对el-tree树形控件多选个数限制
<el-tree ref="tree" :props="props" :load="loadNode" lazy
:filter-node-method="filterNode" :show-checkbox="checkbox" :check-strictly="ClickNode" @check="handleTreeCheck"
node-key="id" @node-click="handleClick">
</el-tree>
想要限制多选个数,一定要设置node-key
:show-checkbox="checkbox" 这个表示多选框。 :check-strictly="ClickNode"这个表示是否父子控件之间不关联。
// 选择个数判断
handleTreeCheck(currNode, checkedInfo) {
let checkedKeys = checkedInfo.checkedKeys || []; //id
let checkedNodes = checkedInfo.checkedNodes //节点信息
let treeNodesMap = this.$refs.tree.store?.nodesMap || {};
let index = checkedKeys.findIndex(id => id === currNode.id)
let status = checkedKeys.length > 5
if (status) {
this.$message.warning('最多只能选择5个!')
checkedKeys.splice(index, 1)
//设置选中的个数
this.$refs.tree.setCheckedKeys(checkedKeys)
Object.keys(treeNodesMap).forEach(key => {
let item = treeNodesMap[key] || {};
if (!checkedKeys.includes(key)) {
let data = item.data || {};
data.disabled = status;
//设置其他的展开点击为不可选取
this.$refs.tree.setCurrentNode(data);
}
})
}
},
上面就是基本的实现方式,使用了两个自带的方法,都可以用来做个数限制。但是setCheckedKeys点击个数固定后,新展开会有问题,所以加上setCurrentNode做新的懒加载数据的限制。
2、树形控件实现lable样式自定义
首先需要在 tree控件上加上 :render-content="RenderContent"
下面是用于修改某个节点的颜色或者样式。参数有三个,可以官网查看,或者自行百度单独的RenderContent使用
//用于编写颜色,参数括号内为三个,可以查看文档
RenderContent(h, { node }) {
if (this.QYArrayList.includes(node.data.id)) {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between;padding-right: 8px;">
<span>
<span class="el-tree-node__label" style="color:red">{node.label}</span>
</span>
</span>
)
} else {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
<span>
<span class="el-tree-node__label" >{node.label}</span>
</span>
</span>
)
}
},
3、取消或者展示某个节点的展开符号(左边小箭头)
效果图:
当在某个层级或者某个条件取消其展开符号 知需要再props内,设置isLeaf的条件
props: {
label: 'label',
children: 'children',
isLeaf: (data, node) => {
if(node.data && node.data.xzjb === 0) {
return true
}else{
return 'leaf'
}
},
},