vue element树形组件选中节点与半选中节点按顺序放入一个数组中

写到一个利用树形组件分配权限的时候,传过去的数据必须是按顺序排列好的一个数组,所以就写了一个函数实现这个要求~


捕获6.JPG
<template>
  <div>
    <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @check="treeChose"></el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultKeys: [],
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      form: {
        menuIds: []
      }
    };
  },
  created() {},
  methods: {
    treeChose(data, node) {
      let _this = this;
      // console.log(data, node);
      _this.form.menuIds = [];
      // 选择的节点id
      let checkNodeKeys = node.checkedKeys;
      // 半选的节点id
      let halfCheckNodeKeys = node.halfCheckedKeys;
      // console.log(checkNodeKeys, halfCheckNodeKeys);
      // 根据节点 id 顺序,将 menuId 按顺序放入 form 的 menuIds 属性中
      function addMenuId(val) {
        // console.log(val);
        // 如果 menuIds 中没有 且选中节点或者半选节点 id 中存在,就放进去
        if (
          _this.form.menuIds.indexOf(val.id) == -1 &&
          (halfCheckNodeKeys.indexOf(val.id) != -1 ||
            checkNodeKeys.indexOf(val.id) != -1)
        ) {
          _this.form.menuIds.push(val.id);
          // 放过之后,循环节点的 children 属性
          for (let j of val.children ? val.children : []) {
            addMenuId(j);
          }
        }
      }
      for(let i of _this.data){
        addMenuId(i);
      }
      console.log(_this.form.menuIds);
    }
  }
};
</script>
<style scoped>
</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,805评论 1 32
  • PHP常用函数大全 usleep() 函数延迟代码执行若干微秒。 unpack() 函数从二进制字符串对数据进行解...
    上街买菜丶迷倒老太阅读 5,190评论 0 20
  • 总结了一些开发中常用的函数: usleep() //函数延迟代码执行若干微秒。 unpack() //函数从二进制...
    ADL2022阅读 3,311评论 0 3
  • 自己若成功了,放屁都有道理;自己若失败了,再有道理也是放屁……共勉 !
    王芝权阅读 1,124评论 0 0