el-tree 的使用

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中找的父级 生成所需要的数据放进去  在将对应的 子级元素放到相应的位置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值