树状结构图是个老大难,各种问题层出不穷,今天讲讲优化吧,产品说用户体验不友好,嫌弃旁边的复选框太小,点不着,好家伙,我是没感觉点不着,而且人家官方文档也是点旁边复选框进行选中的。
没办法,谁让产品大佬说一不二呢,开始优化,
哎呀,其实也不难,点击节点获取唯一id,然后set一波,完美。
且听我细细道来
官方文档中:Element - The world's most popular Vue UI framework
check | 当复选框被点击的时候触发 | 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
这俩呢,一个是复选框点击时候触发,一个是节点被点击时候触发,都可以拿到node-key的那个唯一值,我这边呢是id
附上代码:
<el-scrollbar style="height:400px">
<el-tree
v-show="searchForm.categoryName"
ref="searchTree"
:empty-text="searchTreeEmptyText"
:class="dialogData.onlyOneSelected?'checkTree':''"
:filter-node-method="filterNode"
:props="defaultProps"
:data="searchTreeData"
check-strictly
show-checkbox
node-key="id"
@check="checkGroupNode"
@node-click="handleNodeClick"
/>
</el-scrollbar>
上面属性中,着重看好node-key,唯一识别id,这按照后端给的唯一值进行渲染即可
还有就是这两个事件
// 选择会触发checkGroupNode方法
checkGroupNode(checkedNodes, checkedKeys) {
// 勾选上的数组id
this.dataList = checkedKeys.checkedKeys
this.$refs.tree.setCheckedKeys(checkedKeys.checkedKeys)
this.$refs.searchTree.setCheckedKeys(checkedKeys.checkedKeys)
},
// 点击节点
handleNodeClick(data) {
const arr = this.dataList
// 已经勾选,则再次取消,没有勾选,则勾选
if (arr.some(item => item === data.id)) {
arr.splice(arr.indexOf(data.id), 1)
} else {
arr.push(data.id)
}
this.dataList = arr
this.$refs.tree.setCheckedKeys(arr)
this.$refs.searchTree.setCheckedKeys(arr)
},
大概讲一波,check事件,两个参数,咱不了解的话,先打印一波,
可知第一个参数是当前点击的复选框的节点所对应的对象,第二个参数代表树目前的选中状态对象
有了这个,就可以拿到第二个参数中的checkedKeys,这个数组就是选中的id组成的数组,可以直接用这个方法,设置选中
setCheckedKeys | 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false |
复选框选中的时候,拿到目前选中数组,储存在data中,我命名为dataList,然后当点击节点的时候,(也相当于点击文案)然后调用handleNodeClick方法,获取储存的在data中的数组,判断如果,点击的节点有就删除,没有就添加,这边来一手es5 some方法加上indexOf判断一手,最后再调用一波setCheckedKeys方法勾选目前数组,达到我们伟大的产品要的需求。