<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :expandIconColumnIndex="-1"
    :expandIconAsCell="false"
    :rowKey="(record) => record.key"
    :expandedRowKeys="curExpandedRowKeys"
    :row-selection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }"
  >
    <!-- 
      columns                    //表格标题
      data-source                //表格数据
      expandIconAsCell={false}   // 去除表格标题栏+号(如果需要前面的加号可以不需要添加,我的需求是自定义展开所以要隐藏!!!)
      expandIconColumnIndex={-1} // 去除表格body里的+号(如果需要前面的加号可以不需要添加,我的需求是自定义展开所以要隐藏!!!)
      rowKey                     //一定要是唯一值不然会报错
      expandedRowKeys            //这个属性很重要决定哪行展开!!!
      row-selection              //列表项是否可选择
 -->
    <a slot="action" slot-scope="record" @click="handleExpand(record.key)"
      >点我展开</a
    >
    <p
      slot="expandedRowRender"
      slot-scope="record"
      style="margin: 0; height: 200px; background: #ccc"
    >
      我是被展开的行
    </p>
  </a-table>
</template>
<script>
const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "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,
      curExpandedRowKeys: [], //点击哪行展开数组(数组里只会存在一个值,具体逻辑在methods的点击事件里.)!!!
      selectedRowKeys: [],//列表项是否可选择数组
    };
  },
  methods: {
    //点击展开逻辑,这里的行处理的核心逻辑是：每次只允许展开表格中的某一行。具体如下：当点击某行按钮时，
    //将当前行数据的 key 传递到点击函数中，并在判断当前点击行是否在绑定数组中存在。若存在，则需要判断点击行是否是已展开行。
    //若是已展开行，则将其关闭，否则，即为打开新行。行的展开与关闭都是通过绑定的 rowKeys 数组操作来实现。
    //(这段是复制的掘金老大哥的,但是他的取消表格前的+号的css样式穿透在我这里并不起作用,他把这段逻辑梳理的很清楚,所以直接拿过来用了.嘻嘻!)
    handleExpand(rowkey) {
      if (this.curExpandedRowKeys.length > 0) {
        let index = this.curExpandedRowKeys.indexOf(rowkey);
        if (index > -1) {
          this.curExpandedRowKeys.splice(index, 1);
        } else {
          this.curExpandedRowKeys.splice(0, this.curExpandedRowKeys.length);
          this.curExpandedRowKeys.push(rowkey);
        }
      } else {
        this.curExpandedRowKeys.push(rowkey);
      }
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

<style scoped>
</style>

这是最后完成的效果

这是未去除表格前+号的效果

这是掘金老大哥的原博!!!这里解释的更加全面,我只是把我理解的总结了一下,需要的可以去欣赏文笔更精彩的总结