ant-design 中a-table应用的特殊场景

  在项目中遇到一个问题，需要获取的列表的列表头不清楚，获取的数据也不清楚，如何使用a-table来绑定数据呢？

  经过尝试，找到了一种方法:

1.先通过接口获取列表头，并拼接字符串，传递给column：注意要点击第一列跳转详细，所以添加一个slot;

2.链式调用获取数据列表的接口，并绑定数据

// 获取列表头的接口       
getDataListTitle({tableId: this.tbid}).then(res=>{
       
        if(res.status==0){
          let data=res.data
         // 拼接列表头
          this.columns=[]
          for(let key in data){
            let col={ title: data[key], dataIndex: key, key: key, visible:true}
            this.columns.push(col)
          }
          // 为第一列设置slot,跳转详细页
          if(this.columns.length>0){
            this.columns[0].scopedSlots = { customRender: "no" }
          }
          
          let option = {
            pageNum: 1,
            pageSize: this.pageSize
          };
          // 链式调用获取数据的接口
          return getDataList(option)
        }
        else{
          return  new Promise(function(resolve, reject){ 
               reject('没有返回')
            });
        }
      }).then(res=>{
        // 绑定数据
        this.bindData(res)
      }).catch(()=>{
      })
//  绑定数据的方法
bindData(res) {
     
      this.total = res.data.total;
      let data = [];
      data = res.data.list == null ? [] : res.data.list;
      this.dataSource = data;
    },

3.a-table的处理

<a-table
              :data-source="dataSource"
              :columns="columns"
              rowKey="id"
              :pagination="{
                current: onpage,
                pageSize: pageSize,
                total: total,
                showSizeChanger: true,
                showLessItems: true,
                showQuickJumper: true,
                showTotal: (total, range) =>
                  `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
                onChange: onChange,
                pageSizeOptions: pageSizeOptions,
                onShowSizeChange: onSizeChange,
              }"
            >
                <span slot="title"> </span>
                <a slot="no" slot-scope="data,record" @click="todetail(record.id)">{{data}}
                </a>
            </a-table>

通过以上步骤，就能实现不清楚列表头的列表如何绑定数据啦！注意，我这里是明确该列表中有id列，且是唯一标识列的。