寫到一個利用樹形組件分配權(quán)限的時候，傳過去的數(shù)據(jù)必須是按順序排列好的一個數(shù)組斑胜，所以就寫了一個函數(shù)實現(xiàn)這個要求~

捕獲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 = [];
      // 選擇的節(jié)點id
      let checkNodeKeys = node.checkedKeys;
      // 半選的節(jié)點id
      let halfCheckNodeKeys = node.halfCheckedKeys;
      // console.log(checkNodeKeys, halfCheckNodeKeys);
      // 根據(jù)節(jié)點 id 順序,將 menuId 按順序放入 form 的 menuIds 屬性中
      function addMenuId(val) {
        // console.log(val);
        // 如果 menuIds 中沒有 且選中節(jié)點或者半選節(jié)點 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);
          // 放過之后,循環(huán)節(jié)點的 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>