• 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
      }
    

      

  • 相关阅读:
    mysql定时删除数据
    【video__播放】视频播放插件video7.4.1使用
    【ueditor__使用】百度ueditor富文本编辑器
    【 CSS__样式收集】常用样式案例收集整理
    【Layui__监听button】在form中监听按钮事件
    【Layui__分页和模板】分页和模板的整合使用
    【Layui__模板引擎】layui.laytpl
    DataTable转list
    反射方法创建委托
    EPPlusHelper
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11670385.html
Copyright © 2020-2023  润新知