antd vue 可展开table组件——自定义展开按钮类型与自定义按钮位置

最近项目碰到一个需求如标题，个人记录下，如果有更好的方法欢迎交流！

官方默认可展开table

改造后的table

<template>
  <div class="about">
    <!-- 介绍属性 -->
    <!--
      columns：表头
      data-source：这个就不必多说了吧
      :expandIconColumnIndex="3"：展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面(索引从0开始,想放在第几列以此类推。)
      :expandIconAsCell="false"： 取消默认的展开按钮
      :expandIcon="expandIcon":自定义展开图标
    -->
    <a-table
      :columns="columns"
      :data-source="data"
      :expandIconColumnIndex="3"
      :expandIconAsCell="false"
      :expandIcon="expandIcon"
    >
      <a slot="action" slot-scope="text" href="javascript:;">Delete</a>
      <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        {{ record.description }}
      </p>
    </a-table>
  </div>
</template>

<script>
// 表头
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "Action",
    dataIndex: "",
    key: "x",
    scopedSlots: { customRender: "action" },
  },
];

const data = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
  },
  {
    key: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.",
  },
  {
    key: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.",
  },
];
export default {
  data() {
    return {
      data,
      columns,
    };
  },
  methods: {
    // 自定义展开按钮
    expandIcon(props) {
      if (props.expanded) {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <a
            style="color:red;"
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
          >
            收起
          </a>
        );
      } else {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <a
            style="color:red;"
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
          >
            展开
          </a>
        );
      }
    },
  },
};
</script>

<style>

</style>