Ant Design Vue数据表格 序号

参考：https://blog.youkuaiyun.com/qq_38344500/article/details/105995886

核心代码

   	<!-- 序号 -->
            <span slot="num" slot-scope="text, record, index">
                {{ (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}
            </span>

  {
    title: '序号',
    dataIndex: 'num',
    key: 'num', width: 50,
    align: 'center',
    fixed: true,
    scopedSlots: {
      customRender: 'num'
    }
  },

完整代码

<a-table
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
            :rowKey="(item) => item.id"
            @change="handleTableChange"
            :scroll="{x:1500}"
            bordered
          >
          	<!-- 序号 -->
            <span slot="num" slot-scope="text, record, index">
                {{ (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}
            </span>
            
            <template slot="operation" slot-scope="text,item">
              <a-button
                type="primary"
                size="small"
                @click="showShow(item)"
                style="margin-left: 10px; font-size: 10px"
              >
                查看
              </a-button>
              <a-button
                  disabled
                  @click="cancel(item)"
                  type="danger"
                  size="small"
                  style="margin-left: 10px; font-size: 10px"
              >
                撤销
              </a-button>
            </template>
          </a-table>

const columns = [
  {
    title: '序号',
    dataIndex: 'num',
    key: 'num', width: 50,
    align: 'center',
    fixed: true,
    scopedSlots: {
      customRender: 'num'
    }
  },
  {
    title: "身份证",
    dataIndex: "idcard",
    align: "center",
    width: 250,
  },
  {
    title: "手机号",
    dataIndex: "tel",
    width: 300,
    align: "center",
  },
  {
    title: "车牌号",
    dataIndex: "ship",
    width: 300,
    align: "center",
  },
  {
    title: "车轴类型",
    dataIndex: "trucktype",
    width: 300,
    align: "center",
  },
  {
    title: "审核类型",
    dataIndex: "state",
    width: 300,
    align: "center",
    customRender: function (val) {
      if (val === 1) {
        return "未审核";
      } else if (val === 2) {
        return "已审核"
      }
    }
  },
  {
    title: "操作",
    dataIndex: "操作",
    align: "center",
    fixed: "right",
    width: 180,
    scopedSlots: {customRender: "operation"},
  },
]


export default {
  components: {
    edit
  },
  data() {
    return {
      pageParams: {
        ship: '',
        tel: '',
        state: 1, // 1：未审核  2：已审核
        page: 1,
        rows: 10,
      },
      showFlag_list: true,
      showFlag_edit: false,
      loading_sk: false,
      form: {},
      data: [],
      columns,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: [
          "10",
          "20",
          "50",
        ], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
    };
  },
  methods: {
	// 搜索
    handleSearch() {
      this.pageParams.page = 1;
      this.loadData();
    },
    // 清空
    handleClear() {
      this.pageParams.tel = ''
      this.pageParams.ship = ''
      this.loadData();
    },
    // 分页
    handleTableChange(page, pageSize) {
      this.pageParams.page = page.current;
      this.pageParams.rows = page.pageSize;
      this.loadData();
    },
    // 加载数据
	loadData() {
      this.$myapi.api_kj_biz_car.page(this.pageParams).then((response) => {
        if (response.data.code === 1) {
          const result = response.data;
          console.log('result:', result)
          this.data = result.data.items;
          this.pagination.pageSize = result.data.rows;
          this.pagination.total = result.data.total;
          this.pagination.current = result.data.page;
          this.pageParams.page = result.data.page;
          this.pageParams.rows = result.data.rows;
        } else {
          console.log('查询到的数据为空')
        }
      });
    }

  }