vue3+ant 2.x tabls表格内容的自定义和插槽使用

1.表格内容的自定义，后端接口数据返回的数据有时是状态码，例如0和1，0代表未通过，1代表通过，此时我们肯定不能在表格上显示0或1，这时就用到表格自定义

 const columns2 = ref([   colums2表格头数据
    {
      title: "序号",
      key: "index",
      customRender: ({ text, record, index }) => `${index + 1}`,
    },
    {
      title: "登录账户",//表格头数据
      dataIndex: "login",//接口返回值与此表格头数据绑定
      key: "login",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      ellipsis: true,
    },
    {
      title: "用户组",
      dataIndex: "orgId",
      key: "orgId",
    },
    {
      title: "状态",
      dataIndex: "activated",
      customRender: (val) => {//根据接口返回值自定义渲染数据
        // customRender属性是一个方法，可接收三个参数（val,row,index），分别是当前值、当前行数据和当前索引 
        return val.text == 1 ? "正常" : "未激活";
      },
      key: "activated",
    },

2.在表格内使用插槽

html代码

         <a-table
              :dataSource="dataSource1"
              :columns="columns1"
              rowKey="sign"
              :pagination="pagination"
            >
              //插槽start
              <template #action="{ record }">//#action与表格columns数据关联，columns数据在js
                <span>
                  <a @click="inHandle(record)"
                    ><InGroup :ingroup="ingroup"
                  /></a>
                  <a-divider type="vertical" />
                  <a>停用</a>
                  <a-divider type="vertical" />
                  <a class="ant-dropdown-link"> 删除 </a>
                </span>
              </template>
              //插槽end
            </a-table>

colimns数据

const columns1 = [
    {
      title: "登录名",
      dataIndex: "one",
      key: "one",
    },
    {
      title: "姓名",
      dataIndex: "two",
      key: "two",
    },
    {
      title: "英文名",
      dataIndex: "there",
      key: "there",
    },
     
    {
      title: "操作",
      key: "action",
      slots: { customRender: "action" },//自定义插槽
    },
  ];