element-ui树形组件tree选中用法

发表于 分类于 / / Changyan：

tree选中笔记

1
2
3
4
5
6
7
8
9
10
<el-tree
  :data="permissionForm.treeData"
  :props="permissionForm.defaultProps"
  show-checkbox
  node-key="id"
  ref="permissionTreeRef"
  default-expand-all
  :default-checked-keys="permissionForm.selectedList"
>
</el-tree>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const permissionForm = reactive({ // 预案查看权限表单
  preplanId: null, // 预案id
  treeData: [], // 数据源
  selectedList: [], // 选中用户数组 e.g. ['1', '2', '5']
  defaultProps: {
    children: 'children',
    label: 'name'
  }
});


// 设置查看权限
async onPermissionAction({ row }) {
  console.log('设置查看权限');
  permissionDialogRef.value.show();      
  permissionForm.preplanId = row.id;
  const res = await service.getPermissionById({ id: row.id });
  const permissionList = res.data;
  if (Array.isArray(permissionList)) {
    if (permissionList.length) { // 设置了权限
      permissionTreeRef.value.setCheckedKeys(permissionList.map(v => v.userId));
    } else { // 默认为空, 代表没有设置权限, 要全选
      permissionTreeRef.value.setCheckedKeys(permissionForm.selectedList);
    }
  }
},