antdv 树形表格（配合jeecg）

最新推荐文章于 2024-09-14 07:29:25 发布

m0_67402970

最新推荐文章于 2024-09-14 07:29:25 发布

阅读量689

点赞数

分类专栏： java 后端文章标签： java 后端

本文链接：https://blog.csdn.net/m0_67402970/article/details/123593403

版权

java 同时被 2 个专栏收录

270 篇文章 23 订阅

订阅专栏

后端

10 篇文章 0 订阅

订阅专栏

项目需求用到了树形表格，目前暂不支持父子数据递归查询所以就手动改造了一下。

官网table： Ant Design Vue

原理：通过监听@expand，手动改变children里的数据。

HTML

 <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :defaultExpandedRowKeys="expandedRowKeys"
        @expand="expandChange"
      />

 expandChange(expanded, record){
        console.log(`expandChange`,expanded, record);
        if(!expanded)  return 
        const id = record.id
        const data = this.dataSource
        getAction(this.url.getLowList, { id: record.id }).then((res) => {
          if (res.success) {
            //获取到的子节点
            const children = res.result || []
            children.forEach(opt=>{
              // 如果children为空 不显示展开icon
              if(opt.children.length === 0){
                delete opt.children
              }
            })
            const dataSourceMap = (items) => {
              items.find((item) => {
                if (item.id === id) {
                  //找到当前要展开的节点
                  item.children = children
                  return items
                }
                if (item.children && item.children.length > 0) {
                  dataSourceMap(item.children)
                }
              })
            }
            dataSourceMap(data || [])
            this.setDataSource(data)
          } else {
            this.$message.warning(res.message)
          }
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      setDataSource(data){
        this.dataSource = data
      },
      loadData(arg){
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        params.projectId = this.projectId
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            this.dataSource.forEach(item=>{
              if(item.children.length === 0){ // children为空不显示expand icon
                delete item.children
              }
            })
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },