ant design vue树选择

 <a-card title="树">
            <a slot="extra" @click="handleReset">重置</a>
            <div style="width: 100%; height: 500px; overflow-y: scroll">
              <a-tree
                showIcon
                :key="treeKey"
                :tree-data="treeData"
                :load-data="onLoadData"
                @select="onSelect"
                :replace-fields="replaceFields"
              >
                <a-icon slot="folder" type="folder" />
              </a-tree>
            </div>
          </a-card>

data(){
return{
 treeKey: 0,
 treeData: [],
 pid:null,
 id:null,
 replaceFields: {
        title: 'name',
        key: 'id',
      },
}
},
methods:{
 //重置
    handleReset() {
      this.queryParam = {
        pid: 0,
      }
      //表格刷新
      this.$refs.table.refresh(true)
      this.handelTree()
    },
     onLoadData(treeNode) {
      return new Promise((resolve) => {
        userGroupListTree({ pid: treeNode.eventKey }).then((res) => {
          if (res.data != null && res.data.length > 0) {
            res.data.map((item) => {
              item.slots = { icon: 'folder' }
            })
            treeNode.dataRef.children = res.data
            this.treeData = [...this.treeData]
            resolve()
          } else {
            resolve()
          }
        })
      })
    },
    handelTree() {
    //获取数据接口
      userGroupListTree().then((res) => {
        this.$nextTick(() => {
          res.data.map((item) => {
            item.slots = { icon: 'folder' }
          })
          this.treeData = res.data
        })
      })
      this.treeKey++
    },
    //被选中
    onSelect(selectedKeys, info) {
      if (info.selected) {
        this.queryParam = {
          pid: selectedKeys[0],
        }
      }
      this.$refs.table.refresh(true)
      this.selectedKeys = selectedKeys[0]
      this.id = info.node.dataRef.id
    },
}