How to control the expanded row event of elementui's el-table with a custom button, and achieve "expand" and "collapse" switching

I. Introduction:

The requirement is to click the expand button in each row of the table to expand the content, as shown below:

Check the official website of elementUI for an example of expansion, but the example on the official website is to click the arrow in front of the table to control the expansion and collapse. As shown below:

2. In order to meet the effect we want, directly enter the code:

html code:

<template>
  <div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="expandTable"
        row-key="id"
        :expand-row-keys="expands"
        :header-cell-style="{ background: '#EFF3F5', color: '#6B7275' }"
      >
        <el-table-column type="expand" width="1">
          <template #default="props">
            <div>展开内容:{
   
   { props.row.expandMsg }}</div>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              size="small"
              class="btnClass"
              @click="handleRowClick(scope.row)"
              >{
   
   { scope.row.id == expands[0] ? "收起" : "展开" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

 Note: 1. The id of row-key="id" needs to be the unique identifier of the data

js code:

import { ref } from "vue";
const tableData = ref([{ id: 1, name: "aaa", expandMsg: "我是展开内容" },{ id: 2, name: "bbb", expandMsg: "我是展开内容bbb" }]);
//实现展开收起
const expands = ref([]);
const handleRowClick = (row) => {
  console.log(row);
  if (expands.value.includes(row.id)) {
    expands.value = expands.value.filter((val) => val !== row.id);
  } else {
    expands.value = []; //添加该代码实现手风琴模式，删除该代码取消手风琴模式
    expands.value.push(row.id);
  }
};

Note: 1. tableData is tabular data, which needs to have an id (it can be changed according to the project, and it must be a unique value), and then it needs to be consistent with the value of row-key.

2. The id operated within the handleRowClick function also needs to be consistent with the value of row-key.

Complete code:

<template>
  <div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="expandTable"
        row-key="id"
        :expand-row-keys="expands"
        :header-cell-style="{ background: '#EFF3F5', color: '#6B7275' }"
      >
        <el-table-column type="expand" width="1">
          <template #default="props">
            <div>展开内容:{
   
   { props.row.expandMsg }}</div>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              size="small"
              class="btnClass"
              @click="handleRowClick(scope.row)"
              >{
   
   { scope.row.id == expands[0] ? "收起" : "展开" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<script setup>
import { ref } from "vue";

const tableData = ref([{ id: 1, name: "aaa", expandMsg: "我是展开内容" },{ id: 2, name: "bbb", expandMsg: "我是展开内容bbb" }]);
//实现展开收起
const expands = ref([]);
const handleRowClick = (row) => {
  console.log(row);
  if (expands.value.includes(row.id)) {
    expands.value = expands.value.filter((val) => val !== row.id);
  } else {
    expands.value = []; //添加该代码实现手风琴模式，删除该代码取消手风琴模式
    expands.value.push(row.id);
  }
};
</script>

<style lang="scss" scoped>

:deep(.el-table__expand-icon) {
  display: none;
}
.tableBox {
  background-color: #ffffff;
  padding: 30px;
}
</style>

Note: Because we already have expand and close buttons, we need to hide the arrows that come with elementui.

:deep(.el-table__expand-icon) {
  display: none;
}