ant design vue Table表格使用插槽

# 项目场景：
我们怎么用ant design vue实现这样的表格呢？

 解决方案：
1、写template中的内容

  <!-- 表格 -->
   <a-table
        :row-selection="rowSelection"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="pagination"
      >
        <span slot="num" slot-scope="text, record, index">
          <!-- 序号递增 -->
          {{ (pagination.pageNo - 1) * pagination.pageSize + parseInt(index) + 1 }}
          <!--序号不递增 -->
          <!-- {{ parseInt(index) + 1 }} -->
        </span>

        <template slot="action" slot-scope="text, record" class="btn">
          <a @click="see(record)" class="operation">查看</a>
          <a @click="down(record)" class="operation">导出</a>
          <a @click="confirm(record)" class="operation">删除</a>
        </template>
      </a-table>

2、写data中的内容

export default {
  data() {
    return {
    //分页一定要有 （表格序号要使用）
      pagination: {
        //分页
        pageNo: 1, //当前页
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
        onChange: (page, pageSize) => this.onPageChange(page, pageSize), //点击页码事件
        total: 0, //总条数
      },
    const columns = [
  {
    title: '序号',
    type: 'index',
    width: 70,
    dataIndex: 'num',
    align: 'center',
    scopedSlots: { customRender: 'num' },
  },
  {
    title: '日志文件名',
    dataIndex: 'name',
    ellipsis: true, //超出显示省略号
    align: 'center',
  },
  {
    title: '类别',
    dataIndex: 'age',
    align: 'center',
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    align: 'center',
  },
  {
    title: '日期',
    dataIndex: 'time',
    align: 'center',  
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }, //插槽使用
    align: 'center',
  },
]
const data = [
  {
    name: '文案文案',
    age: 32,

    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 42,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 32,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 99,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 99,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 99,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 32,

    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 42,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 32,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 99,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 99,
    time: '2022-3-12',
    size: '500kb',
  },
  {
    name: '文案文案',
    age: 99,
    time: '2022-3-12',
    size: '500kb',
  },
]
    }
    }
    }

3、写methods和computed中的内容

  methods: {
 /**
     * 查看事件
     */
    see(val) {
      console.log('点击查看', val)
    },
    /**
     * 导出事件
     */
    down(val) {
      console.log('点击导出', val)
    },
    /**
     * 删除弹窗点
     */
    confirm(e) {
      console.log(e)
      Modal.confirm({
        title: '删除',
        content: '确定要删除这条数据吗？',
        onOk: () => {
          this.$message.success('删除成功')
        },
        onCancel: () => {
          this.$message.error('取消删除')
        },
      })
    },

onPageChange(page, pageSize) {
  console.log(page, pageSize)
  this.pagination.pageNo = page
},

onSizeChange(current, pageSize) {
  console.log(current, pageSize)
  this.pagination.pageNo = 1
  this.pagination.pageSize = pageSize
},

  }

  computed: {
    /**
     * 表格序号前面的多选框的事件
     */
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
      }
    },
  },