vue3 + tsx + antd3.x 使用antd表格插槽

声明列表

originColumns: [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "角色名",
      dataIndex: "roleName",
      key: "roleName",
    },
    {
      title: "类型",
      dataIndex: "roleType",
      key: "roleType",
    },
    {
      title: "启用",
      dataIndex: "isDelete",
      key: "isDelete",
    },
    {
      title: "操作",
      key: "option",
      // 声明插槽
      slots: {
        customRender: "option",
        },
    },
],

setup(){
    return () => {
        const handleSlot = {
        // option和columns插槽声明一致
        option: ({ record }: any) => {
          return (
            <div>
              <a
                onClick={() => {
                  deleteHandle(record);
                }}
              >
                操作
              </a>
              <Divider type="vertical" />
            </div>
          );
        },
      };
      return(
        <div>
          <Table
            v-show={state.showTable}
            size="small"
            style={{ marginTop: "8px" }}
            dataSource={state.dataSource}
            columns={state.columns}
            v-slots={handleSlot}
          ></Table>
        </div>
      )
    }
}

更为方便的办法

<Table
            v-show={state.showTable}
            size="small"
            style={{ marginTop: "8px" }}
            dataSource={state.dataSource}
            columns={state.columns}
            // v-slots={handleSlot}
          >
            {{
              option: (record: any) => {
                return (
                  <div>
                    <a
                      onClick={() => {
                        deleteHandle(record);
                      }}
                    >
                      关联菜单
                    </a>
                    <Divider type="vertical" />
                    <Dropdown
                      trigger={["click"]}
                      v-slots={{
                        overlay: () => {
                          return (
                            <Menu>
                              <MenuItem key="1">
                                <span>已有用户</span>
                              </MenuItem>
                              <MenuItem key="2">
                                <span>查看</span>
                              </MenuItem>
                              <MenuItem key="3">
                                <span>编辑</span>
                              </MenuItem>
                              <MenuItem key="4">
                                <span>删除</span>
                              </MenuItem>
                            </Menu>
                          );
                        },
                      }}
                    >
                      <a class="ant-dropdown-link">
                        更多
                        <DownOutlined />
                      </a>
                    </Dropdown>
                  </div>
                );
              },
            }}
          </Table>

发现问题

由于antd-vu3.x已废除column如下定义

originColumns: [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "操作",
      key: "option",
      // 已废除
      // slots: {
      //  customRender: "option",
      //  },
      dataIndex: "option",
    },
    {
      // 使用这种写法即可
      title: "启用",
      dataIndex: "isDelete",
      key: "isDelete",
    },
],

模板部分

表格内容统一bodyCell插槽, 表头使用headerCell插槽, 具体参数值可直接console插槽接受的参数查看

 <Table
      v-show={state.showTable}
      size="small"
      style={{ marginTop: "8px" }}
      dataSource={state.dataSource}
      columns={state.columns}
    >
      {{
        bodyCell: (data: any) => {
          if (data.column.dataIndex === "option") {
            return (
              <div>
                <a
                // onClick={() => {
                //   deleteHandle(data.record);
                // }}
                >
                  关联菜单
                </a>
                <Divider type="vertical" />
                <Dropdown
                  trigger={["click"]}
                  v-slots={{
                    overlay: () => {
                      return (
                        <Menu>
                          <MenuItem key="1">
                            <span>已有用户</span>
                          </MenuItem>
                          <MenuItem key="2">
                            <span>查看</span>
                          </MenuItem>
                          <MenuItem key="3">
                            <span>编辑</span>
                          </MenuItem>
                          <MenuItem key="4">
                            <span>删除</span>
                          </MenuItem>
                        </Menu>
                      );
                    },
                  }}
                >
                  <a class="ant-dropdown-link">
                    更多
                    <DownOutlined />
                  </a>
                </Dropdown>
              </div>
            );
          } else if (data.column.dataIndex === "openStatus") {
            return (
              <div>
                {data.value.value === "1" ? (
                  <check-circle-two-tone two-tone-color="#52c41a" />
                ) : (
                  <close-circle-two-tone two-tone-color="red" />
                )}
              </div>
            );
          } else if (data.column.dataIndex === "roleType") {
            return (
              <div>
                {data.value === "USER"
                  ? "用户"
                  : data.value}
              </div>
            );
          }
        },
      }}
    </Table>