antd的tree组件使用默认选中以及渲染数据

这个tree是在modal里面的 由外部table操作showModifyModal 打开

  <a-tree
  checkable
  :tree-data="treeData"
  v-model:expandedKeys="expandedKeys"
  v-model:selectedKeys="selectedKeys"
  v-model:checkedKeys="checkedKeysM"
  :auto-expand-parent="autoExpandParent"
  @check="onSelectChange"
  :replaceFields="{
    title: 'name'
  }"
>
</a-tree>

因为后台获取到的数据包中 是name 根据antd官方案例更换名字为title

其中v-model的数据都是通过ref

const expandedKeys = ref([])
const selectedKeys = ref([])
let checkedKeysM = ref([])

const不可变 let可变

将获取到的数据进行处理

const showModifyModal = record => { //显示弹框
  menuQuery()   //获取到弹框中的数据并填充
    .then(rstData => {
      state.treeData = rstData
    })
    .catch(err => {
      console.log('errorMsg:', err)
    })
  // checkedKeysM.splice(0, checkedKeysM.length)
  let test = []
  state.showModify = true
  state.modifyInfo.id = record.id
  state.modifyInfo.roleName = record.roleName

  for (var i = 0; i < record.menus.length; i++) {
    if (record.menus[i].menuFatherKey !== null) {
      var tem = ''
      tem = record.menus[i].menuKey
      test.push(tem)
    }
    checkedKeysM.value = test
  }
}

把用户所拥有权限添加到checkedKeysM中

const onSelectChange = (selectedKeys, info) => {
  let checkedKey = [...selectedKeys, ...info.halfCheckedKeys]
  //因为只赋值selectedkeys会导致没有全选的部分无法正常传递所以要加halfcheckedkeys
  temp = checkedKey
  console.log(temp)
}

这样新增的选项可以发送给后台