icon-class="el-icon-arrow-right" 改变前面的图标
node-key="sortid" 一般都要加 sortid 就写成你列表的id
:default-checked-keys="defaultCheckeds" 默认选中 这是数组的形式需要存放的是node-key所选用的sortid 字段
show-checkbox 前面加勾选框
empty-text 内容为空的时候展示的文本
:props= defaultProps: {children: 'children',label: 'label'} 自定义设置 children和label要显示的字段
还有一种自定义的方式(插槽)这种方式的可能性就多一点你可以在里面放图标啊等一系列你想要加的东西:
<el-tree
ref="treeRef"
:data="allsubject"
show-checkbox
node-key="sortid"
icon-class="el-icon-arrow-right"
:default-checked-keys="defaultCheckeds"
>
<template v-slot="{ node, data }">
<span>{{ data.sortname }}({{ data.sortvalue }})</span>
</template>
</el-tree>
点击确定的时候 可以通过 let chooseList = this.$refs.treeRef.getCheckedNodes() 得到选中的数据,这里如果 选中了父级 子级还是会出现一遍
this.$refs.treeRef.getCheckedNodes() 这个方法 得到的结果是 有几个勾选就会 返回几条数据
也就是说 如果父级勾选了 子级会全部勾选 父级的返回了 子级也还是会 返回一次 当然这里的父级返回的是带children 的
所以在遍历的时候 要判断 setList 里面是否有这个子元素的父元素
当然也有父元素不勾选的情况 所以这样就要 判断 setList里面已经找到的父元素 的子级里面是否有自己
我的这里后端给我返回的数据是没有父子级的关系的,所以这边是根据 父子级的标识前端重新将数据整理成树型显示所需要的形式
具体步骤如下:
1.如果是父级的话直接 将父级放进 setList 然后在根据要求对children做相应的处理
2.如果不是父级的话要首先在setList数字里面查找是否能找到 当前元素的父级
3.如果找到了 在查找这个元素之前有没有被放进去 如果已经放进去了 return 如果没有 就放进去
4.如果 没有找到当前元素的父级 那就在原来的数组allsubject中找的父级 生成所需要的数据放进去 在将对应的 子级元素放到相应的位置