vue+antd的table组件实现-根据数据不同单元格点击事件及样式

想要达到的效果：table根据数据的不同，单元格样式不同，以及实现单元格点击事件并得到单元格的值

效果展示：

1. 定义table的columns 在表头 通过customCell设置单元格属性,这里我用到handleCell方法返回具体的属性

    columns: [
      {
        title: "机构名称",
        dataIndex: "orgName",
        key: "orgName",
        width: 250,
        align: "center", //头部单元格和列内容水平居中
        customCell: (column: any) => {
          return handleCell(column, "orgName");
        },
      },
      {
        title: "部门名称",
        dataIndex: "department",
        key: "department",
        width: 100,
        align: "center", //头部单元格和列内容水平居中
        customCell: (column: any) => {
          return handleCell(column, "department");
        },
      },
      {
        title: "操作",
        key: "action",
        width: 200,
        align: "center", //头部单元格和列内容水平居中
        scopedSlots: { customRender: "Action" },
      },
    ],
    
    

2. 定义handleCell单元格的具体属性，这里我设置单元格的值长度大于3时，实现单独样式及点击事件

const handleCell = (record: any, key: string) => {
if (String(record[key]).length > 3) {
  return {
    style: {
      "background-color": "rgb(255,150,150)",
      color: "#fff",
      cursor: "pointer",
    },
    on: {
      click: () => {
        console.log(record, record[key]);
      },
    },
  };
}
};