ant design vue中tree的使用

树的第一层展开需要加上 default-expand-all和v-if="props.treeData.length>0

<a-tree

    class="draggable-tree"

    :tree-data="props.treeData"

    :replaceFields="{ children: 'children', title: 'name', key: 'id' }" //设置children，key值的字段

    default-expand-all  //展开树

    @select="clickRow"

    v-model:selectedKeys="rowKeys"

    v-if="props.treeData.length>0"  //如果树不展开就加这个v-if

  />

监听treeData，默认点击树的第一层第一个children（比较笨的方法）

watch(

  () => props.treeData,

  (val) => {

    val.forEach(item=>{

//判断rowKey是否有值和treeData第一层数据是有children

      if(item.children.length && rowKeys.value.length==0){

        rowKeys.value= [val[0].children[0].id];

        emit('select', rowKeys.value);

      }

    })

  },

);

需要点击第一个层的按钮不响应：

const clickRow = (selectedKeys, e) => {

  const arr = [];

   // 循环判断第一层不做传值

  props.treeData.forEach((item) => {

    if (item.id == selectedKeys) {

      arr.push(item);

    }

  });

  if (selectedKeys.length&&arr.length == 0) { //如果满足条件就做传参

    emit('select', selectedKeys);

  }

};