Vue--組件Ant- 樹形結構菜單

 <template>
<!--        checkable-節點前添加復選框       -->
              <a-tree
                defaultExpandAll
                :autoExpandParent="true"
                :treeData="treeData"
                @select="this.onSelect"
              />
            </template>

data () {
  return {
    // expandedKeys: ['0-0-0', '0-0-1'], // 受控展開指定的樹節點
    autoExpandParent: true, // 是否自動展開父節點
    // checkedKeys: ['0-0-0'], // 受控選中的樹節點
    // selectedKeys: [], //（受控）設置選中的樹節點
    treeData: [{
      title: '隊員：',
      key: '0-0',
      children: []
    }],

  getPeopleTree(this.queryParam)
      .then(res => {
        if (res.code && res.code !== 200) {
          this.$message.error(res.message)
        }
        if (res.data !== null) {
          this.peopleTreeData = res.data[0].course_list // 訓練數據
          this.treeData[0].title = res.data[0].member // 訓練人名字
          for (var i = 0; i < res.data[0].course_list.length; i++) {
            var dict = { title: '', key: '' }
            dict.title = res.data[0].course_list[i].course_name + '-' + res.data[0].course_list[i].course_times
            dict.key = res.data[0].course_list[i].course_id
            this.treeData[0].children.push(dict)
          }
          // console.log('最后的數據' + JSON.stringify(this.treeData))
          // 訓練課程id
          // console.log('訓練課程id' + res.data[0].course_list[0].course_id)
        } else {
          this.peopleTreeData = []
          this.treeData[0].title = '暫無記錄'
        }
        this.loading = false
      })
      .catch((error) => {
        console.log(error)
        if (error.message === 'timeout of 6000ms exceeded') {
          this.$message.error('網絡超時')
        }
        this.loading = false
      })
  })
},
onSelect (selectedKeys, info) {
  // console.log('點擊的人的信息' + JSON.stringify(selectedKeys[0]))
  this.xunlian = selectedKeys[0]
  const getparam = {
    course_id: selectedKeys[0],
    user_id: this.queryParam.user_id
  }