编辑提交el-tree

189 阅读1分钟
<el-tree
  :data="tableData"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

树节点由tableData渲染而出:

self.tableData = response.result.position

把此职位分配的权限(菜单)给勾上:

var ids = []
response.result.data.map((e) => {
      ids.push(e.new_menu_id)
});
self.setCheckedKeys(ids);
setCheckedKeys (ids) {
      this.$refs.tree.setCheckedKeys(ids)
},

小tips:setCheckedKeys方法传参ids,如果传了父节点,子节点也会被勾上,所以不用遍历到底

把修改过的权限,点保存,按层级提交给后端:

var checkedMenu = self.$refs.tree.getCheckedNodes(false, true);

小tips:getCheckedNodes方法,返回目前被选中的节点所组成的数组(不管父节点子节点都处于一层上,而且父节点的children下包含未选中的)

var checkedKeys = self.$refs.tree.getCheckedKeys();

getcheckedKeys方法,返回目前被选中的节点的key所组成的数组

去过滤掉未选中的节点
checkedMenu.forEach((e, index, arr) => {
        if (e.children != null) {
          new_menu_id.push(e)
        }
})
new_menu_id.forEach((e) => {
        e.subMenu = e.children.filter((v) => {
          return checkedKeys.includes(v.id)
        })
})