首先我们这篇文章是基于我上边一篇文章增加的新的支持。传送车。
当然如果你没有做成组件，直接使用下边也是可以的。

需求（表单数据增加一列自增排序的序号列）

实现方法：
应用api 传送车

在这里插入图片描述

const columns = [
//首先我们需要添加这个支持 num为你自己定义的slot名称，可以定义成任意名称，如果不需要自增序号，需要把这个去掉即可
      {
        title: "序号",
        slots: { customRender: "num" },
      },
      {
        title: "角色名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "更新时间",
        dataIndex: "updateTime",
        key: "updateTime",
        ellipsis: true,
      },
      {
        title: "操作",
        width: "320px",
        key: "",
        customRender: ({ text, index }) => {
          return (
            <div class="btnbox">
              <a
                href="javascript:;"
                onClick={() => deleteCharacter(text, index)}
              >
                删除
              </a>
              <a
                href="javascript:;"
                onClick={() => uploadCharacter(text, index)}
              >
                更新权限
              </a>
              <a href="javascript:;" onClick={() => lookCharacter(text, index)}>
                查看权限
              </a>
              <a href="javascript:;" onClick={() => lookUser(text, index)}>
                查看用户
              </a>
            </div>
          );
        },
      },
    ];

c-table-data代码需要增加

<a-table
          :columns="columns"
          :data-source="dataSource"
          :pagination="false"
          :bordered="bordered"
          :rowKey="id"
        >
        //这个slot名称要与上边定义的slot名称相对应
        //curent为当前页数 pageSize为当前表格按照多少条数据分页
        //slotProps为num的里边的数据包含text, record, index,可通过.访问。text, record, index的由来是customRender里的值。
          <template v-slot:num="slotProps">{{
            (current - 1) * pageSize + slotProps.index + 1
          }}</template>
        </a-table>

如果有任何不明白可以随时留言