基本常规的一些用法都能在官网上查到：https://www.antdv.com/components/table-cn/

以下是目前项目遇到的一些技能点，总结下记录下来

1、基础用法：

<template>
  <a-table 
    :columns="columns" 
    :data-source="data"
    :pagination="pagination" <!-- :pagination="false" 不分页 -->
    >
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  }
];
export default {
  data() {
    return {
      columns,
      dataSource,
      pagination: {
         pageNum: 1,
         pageSize: 50
      },
    };
  },
};
</script>

 2、向后台获取数据

getSourceData() {
    const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        data: queryParams
    }
    getDataSource(params).then((res) => {  //封装好的axios请求
        if(res.code === 200){
            this.dataSource = res.data.list;
        }else{
            this.$message.error('查询失败！')
        }
    })
},

3、根据状态显示对应文字

{
    title: 'status',
    dataIndex: 'status',
    customRender: (text) => text === 0 ? "失效" : "有效"
},

4、列的隐藏

{
    title: '状态',
    dataIndex: 'delete',
    key: 'delete',
    colSpan: 0,     //隐藏表头
    customRender: (text, row, index) => {
        let obj = {
            children: text,
            attrs: {},
        };
        obj.attrs.colSpan = 0; // 隐藏数据单元格
        return obj;
    },
},

1）根据条件隐藏或显示某些列

// 根据页面列表增减列 和改变table滚动长宽
changeTable(name){
    let arr = [...this.initialColumns]; //复制原始 columns
    if (name === "rejected") { //页面名称是rejected 
        this.columns = arr
        this.scroll = { x: 'calc(1600px + 50%)', y: 600 }; //data上自定义个scroll，列表上添加:scroll="scroll"
    }else{ //其他页面
        this.columns = arr.filter(function (value, index, array) {
            return !(value.dataIndex === 'refusedWhy'||value.dataIndex === 'auditName');
        }); // 返回列名不是‘refusedWhy’、'auditName'的所有列
        this.scroll = { x: 'calc(1200px + 50%)', y: 600 };
    }
},

2）或者直接在定义columns时根据条件判断显示或隐藏

{
    title: '状态',
    dataIndex: 'delete',
    key: 'delete',
    colSpan: flag ? 1 : 0, //表头：flag = true时显示，flag = false时隐藏
    customRender: (value, row, index) => {
        if(flag){  // tbody列：flag = true 时显示，flag = false时隐藏
            return value === '0' ? "删除" : text === '2'? "下架":"正常";
        }else{
            let obj = {
                children: value,
                attrs: {},
            };
            obj.attrs.colSpan = 0; //隐藏
            return obj;
        }
    },
},

5、增加一行或删除一行

<div>
    <a-button @click="addAKURow" class="add-row">新增一行</a-button>
</div>
<a-table
    :columns="columns"
    :data-source="dataSource" 
    :pagination="false"
    :scroll="{ x: 'calc(750px + 50%)', y: 600 }"
>
    <span slot="operation" slot-scope="text, record" v-if="dataSource.length">
        <a-popconfirm title="确定删除此列吗?"
                      @confirm="() => deleteRow(record)"><a href="javascript:;"><a-icon type="delete" /></a>
        </a-popconfirm>
    </span>   
</a-table>

....
/** table column */
{ 
    title: '操作', 
    key: 'operation', 
    scopedSlots: { 
        customRender: 'operation' 
    }, 
},
....

methods: {
    addAKURow() {
        this.dataSource = [
            ...this.dataSource,
            {
                id: this.dataSource.length + 1,
                name: '',
                ... //其他属性
            }
        ];
    },
    deleteSKU(record){
        this.dataSource = this.dataSource.filter(d => d.id !== record.id); //根据id删除此行
    }

}

6、表头、数据单元格添加输入框，根据填写的内容改变此列所有数据

data(){
    return {
        columns,
        dataSource: [],
        updateCost: ''
    }
},
methods: {
    // 循环了所有列改变数据，不知道哪位大佬有更简单的方法，请不另赐教！！！
    enterCost(data){
      data.forEach(item=>{
          item.costPrice = this.updateCost;
      })
    },
    // 处理输入框数据变化
    handleColumnChange(value, id, column) {
        console.log('数据变化')
        const newData = [...this.dataSource];
        const target = newData.filter(item => id === item.id)[0];
        if (target) {
            target[column] = value;
        }
        this.data = newData;
      }
    },
    // 根据成本数据换算为美元
    enterConst(value, id, column){
        const newData = [...this.dataSource];
        const target = newData.filter(item => id === item.id)[0];
        if (target) {
            target[column] = value;
            if(!target['sellingPrice']){
                target['sellingPrice'] = (parseInt(value)/6).toFixed(2);
            }
            this.data = newData;
        }
    },
}

<!-- html -->
<a-table :columns="columns" :data-source="dataSource" :pagination="false">
    <div slot="costPrice" style="width:250px">
         成本<a-input class="table-head-input" v-model="updateCost" @keyup.enter="enterCost(dataSource)" placeholder="成本"/>
    </div>  
    <template v-for="col in ['color','size','costPrice']" :slot="col" slot-scope="text, record">
        <div :key="col">
              <a-input 
                :value="text"
                @change="e => handleColumnChange(e.target.value, record.id, col)"
                @keyup.enter="e =>enterConst(e.target.value, record.id, col)"
                :disabled="record.status=='1'"
              />
        </div>
    </template>
    <span slot="sku" slot-scope="text, record">
        <a>{{record.attrbution= (record.color ? (record.color.replace(/\s*/g,'')) : '') 
            + (record.attributeVal2 ? ('-'+record.size.replace(/\s*/g,'')):'')}}
        </a>
    </span>
</a-table>
....
/** table column */
const columns = [
    { 
        dataIndex: 'costPrice', 
        slots: { title: 'costPrice' }, 
        scopedSlots: { customRender: 'costPrice' }, 
    },
    { 
        title: '颜色', 
        dataIndex: 'sellingPrice',  
    },
    { 
        title: '颜色', 
        dataIndex: 'color', 
        scopedSlots: { customRender: 'color', }, 
    },
    { 
        title: '尺码', 
        dataIndex: 'size', 
        scopedSlots: { customRender: 'size', }, 
    },
    { 
        title: 'attrbution',
        dataIndex: 'attrbution', 
        scopedSlots: { customRender: 'attrbution' }, 
    },
    
]

7、添加scroll后，设置的width不起效

<!-- scroll 需要 :scroll="{ x: 'calc(700px + 50%)', y: 240 } 这么写，原因我也不知道，懂的大佬请赐教！！！！-->
<a-table
    :columns="columns"
    :data-source="data"
    bordered
    size="middle"
    :scroll="{ x: 'calc(700px + 50%)', y: 240 }"  
  />
</a-table>

8、根据后台返回的数据筛选显示

data(){
    dataSource: [], //数据源
    filteredInfo: null, //列表筛选条件
},
methods:{
    //筛选数据
    handleChange(pagination, filters, sorter) {
        console.log('Various parameters', filters);
        this.filteredInfo = filters;
    },
},

computed: {
    columns() { //sku表格列
        let { filteredInfo } = this;
        filteredInfo = filteredInfo || {};
        const columns = [
        {
            title: '状态',
            dataIndex: 'delete',
            key: 'delete',
            filters: [
                { text: '删除', value: '0' },
                { text: '下架', value: '2' },
                { text: '正常', value: '' },
            ],
            filteredValue: filteredInfo.delete || null,
            onFilter: (value, record) => {
                return (record.delete+'').includes(value)
            },
            ellipsis: true,
        },
        ];
      return columns;
    }
},


<a-table
    :columns="columns"
    :data-source="dataSource"
    @change="handleChange"
  />
</a-table>