まず、通常のコンポーネントのインポートから始めます。

<a-table
    :columns="columns"
    :data-source="dataList"
    bordered
    size="middle"
    :scroll="{y: 800}"
    :pagination="false"
  />
  

次に、クリックイベントを追加する方法を説明します。以下に示すコードは、クリックイベントを含むセルのレンダリング方法です。

customRender: (text, row, index) => {
    const self = this;
    const child = self.$createElement("a", {
      domProps: {
        innerHTML: text,
      },
      on: {
        click: function () {
          self.customHandleDetail(row.name, "A01");
        },
      },
    });
    const obj = {
      children: child,
      attrs: {},
    };
    return obj;
  }
  

ここでは、columnsの設定を中心に説明します。dataListはAPIから取得したフラットなデータです。クリックイベントcustomHandleDetail()はカスタムで定義されたもので、必要に応じてパラメータを変更できます。

columns: [
    {
      title: "名称5",
      align: "center",
      children: [
        {
          title: "0人",
          dataIndex: "B01",
          key: "B01",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "B01");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
        {
          title: "1-2人",
          dataIndex: "B02",
          key: "B02",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "B02");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
        {
          title: "3-5人",
          dataIndex: "B03",
          key: "B03",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "B03");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
        {
          title: "6-9人",
          dataIndex: "B04",
          key: "B04",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "B04");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
        {
          title: "10人以上",
          dataIndex: "B05",
          key: "B05",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "B05");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
      ],
    },
    {
      title: "名称6",
      dataIndex: "C01",
      key: "C01",
      width: 50,
      align: "center",
      customRender: (text, record) => {
        const dynamicContents = [];
        const fieldNames = ["C011", "C012", "C013", "C014", "C015", "C016"];
        fieldNames.forEach(fieldName => {
          if (record[fieldName]) {
            dynamicContents.push(<p>{record[fieldName]}</p>);
          }
        });
        const hasDynamicContents = dynamicContents.length > 0;
        if (!hasDynamicContents) {
          return <div class="center-content">{text}</div>;
        }
        return (
          <div class="center-content">
            {dynamicContents.map((content, index) => (
              <div key={index}>
                {content}
                {index < dynamicContents.length - 1 && <hr class="center-content" />}
              </div>
            ))}
          </div>
        );
      },
    },
    {
      title: "テスト1",
      dataIndex: "E15",
      width: 50,
      key: "E15",
      align: "center",
      customRender: (text, row, index) => {
        const self = this;
        const child = self.$createElement("a", {
          domProps: {
            innerHTML: text,
          },
          on: {
            click: function () {
              self.customHandleDetail(row.name, "E15");
            },
          },
        });
        const obj = {
          children: child,
          attrs: {},
        };
        return obj;
      },
    },
    {
      title: "名称10",
      align: "center",
      children: [
        {
          title: "テスト1",
          dataIndex: "F01",
          key: "F01",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "F01");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
        {
          title: "テスト1",
          dataIndex: "F02",
          key: "F02",
          width: 50,
          align: "center",
          customRender: (text, row, index) => {
            const self = this;
            const child = self.$createElement("a", {
              domProps: {
                innerHTML: text,
              },
              on: {
                click: function () {
                  self.customHandleDetail(row.name, "F02");
                },
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
      ],
    },
  ]