如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换

先知demons

已于 2023-09-26 15:52:07 修改

阅读量5.8k

点赞数 6

文章标签： vue.js 前端 javascript

于 2023-09-26 15:49:43 首次发布

本文链接：https://blog.csdn.net/wzy_PROTEIN/article/details/133309979

版权

文章介绍了如何在ElementUI中使用表格组件，实现点击行内的按钮控制表格行内容的展开与收起，同时展示了HTML和JavaScript代码示例，以及如何处理展开/收起状态的手动切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言：

需求是表格内每行点击展开按钮要展开内容，如下图：

查看elementUI的官网有展开例子，但是官网的例子是点击表格前的箭头来控制展开收起的。如下图：

二、为了满足我们想要的效果，直接上代码：

html代码：

<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>

注：1、row-key="id"的id需要是数据的唯一标识符

js代码：

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);
  }
};

注：1、tableData是表格数据，里面需要有id（可根据不用项目换，保证是唯一值就行），然后需要与 row-key的值保持一致

2、handleRowClick 函数内操作的id也是需要和 row-key的值保持一致

完整代码：

<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>

注：因为我们已经有展开和关闭按钮了，所以需要隐藏elementui自带的箭头

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