美文网首页
vue element树形组件选中节点与半选中节点按顺序放入一个

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

作者: 0000000asdasd | 来源:发表于2019-07-11 15:58 被阅读0次

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


捕获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>

相关文章

网友评论

      本文标题:vue element树形组件选中节点与半选中节点按顺序放入一个

      本文链接:https://www.haomeiwen.com/subject/iisdkctx.html