一、前言

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

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

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

html代码
<template>
  <div&gt;
    <div class="tableBox"&gt;
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="expandTable"
        row-key="id"
        :expand-row-keys="expands"
        :header-cell-style="{ background: '#EFF3F5', color: '#6B7275' }"
      &gt;
        <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;
}

原文地址:https://blog.csdn.net/wzy_PROTEIN/article/details/133309979

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_21276.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注