element plus Tree 树形控件的新增及回显

template部分：

<div class="auth">
          <el-scrollbar ref="scrollbarRef" always>
            <el-tree
              :data="data"
              :props="defaultProps"
              :node-key="'permId'"
              show-checkbox
              @check-change="handleNodeClick"
              ref="tree"
            />
          </el-scrollbar>
        </div>

scripe部分：

回显得的重点是：一定要设置唯一值 :node-key="'permId'"，结构数会根据这个唯一值回显。

const permIdList = ref([])//最后提交存储的数据
const tree = ref()
const data = ref([])//结构树数据

const defaultProps = {
  children: 'children',
  label: 'permName'
}


const handleNodeClick = (data, checked, indeterminate) => {
  //获取选中的节点
  const list = tree.value.getCheckedNodes().concat(tree.value.getHalfCheckedNodes())
  permIdList.value = list.map(item => item.permId)
  console.log(list)
}

//提交
const Confirm = () => {
  if (!inputValue.value) {
    ElMessage.warning('请输入分组名称')
    return
  }
  if (permIdList.value.length === 0) {
    ElMessage.warning('请选择权限')
    return
  }

  const payload = {
    roleName: inputValue.value,
    permIdList: permIdList.value
  }

  if (title.value === '新建角色成员') {
    createRoleApi(payload)
  } else {
    payload.roleId = roleObj.value?.roleId
    updateRoleApi(payload)
  }
}

//回显（监听父组件传递的数据）
watch(roleObj, value => {
  if (value) {
    if (title.value === '编辑角色成员') {
      inputValue.value = value.roleName ? value.roleName : ''
      permIdList.value = value.permList ? value.permList.map(item => item.permId) : []
      nextTick(() => {
        if (tree.value) {
          permIdList.value.forEach(item => {
            tree.value.setChecked(item, true, false)
          })
        }
      })
    } else {
      // 清空复选框勾选内容
      tree.value.setCheckedKeys([])
    }
  } else {
    // 清空复选框勾选内容
    tree.value.setCheckedKeys([])
  }
})
const close = () => {
  resetting()//重置数据
  emit('cleanRoleObj')//清空roleObj的数据
}