element-ui table expand展开二级，三级树形菜单手风琴效果，隐藏下拉选项。

Post author:xfxia
Post published:2023年9月20日
Post category:其他

废话不多数先上图片↓

在这里插入图片描述

注意啦：

小伙伴你们的需求和图片一样那么恭喜你来对地方了。

上代码了

HTML

<template>
  <el-table
    :data="compony"
    :row-key="getRowKeys"
    :expand-row-keys="expands"
    @expand-change="toggleRowExpansion"
    :row-class-name="getRowClassName"
  >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table
          :data="props.row.datas"
          :row-key="getRowKeys"
          :show-header="false"
          :expand-row-keys="childExpands"
          @expand-change="childRowExpansion"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column>
            <template slot-scope>{{props.row.title}}</template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <el-table-column label="公司名称" prop="com_name"></el-table-column>
    <el-table-column label="操作">
      <template>
        <el-button size="mini">编辑</el-button>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

export default {
  data() {
    return {
      compony: [
        {
          id: 1,
          com_name: "1公司",
          type: "A",
          title: "标题1",
          // flag: true,
          datas: [
            {
              name: "张三",
              id: 10,
            },
            {
              name: "张三1",
              id: 12,
            },
          ],
        },
        {
          id: 2,
          com_name: "2公司",
          type: "B",
          title: "标题2",
          datas: [
            {
              name: "李四",
              id: 20,
            },
          ],
        },
      ],
      // 要展开的行，数值的元素是row的key值
      expands: [],
      childExpands: [],
    };
  },
  methods: {
    getRowClassName(row) {
      if (row.row.flag) {
        return "row-expand-cover";
      }
    },
    toggleRowExpansion(row) {
      this.childExpands = [];
      this.toggleExpansion("expands", row);
    },
    childRowExpansion(row) {
      this.toggleExpansion("childExpands", row);
    },
    toggleExpansion(Expands, row) {
      let [expandsNum] = this[Expands];
      if (expandsNum == row.id) {
        this[Expands] = [];
        return false;
      }
      this[Expands] = [];
      this[Expands].push(row.id);
    },
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
  },
};

CSS

.row-expand-cover .el-table__expand-icon {
  visibility: hidden;
}

核心

在这里插入图片描述

row-key

绑定你数据的为ID 也可以是个函数笔者这用的就是函数
expand-row-keys

绑定的就是一个数组数组的每一项就是ID了就会自动展开了
@expand-change=“fn”

这个就是控制展时关闭时触发的事件了，笔者初次用的

toggleRowExpansion

这个true 是展开 false 是关闭打开页面时候就崩掉了。

最后发现

@expand-change

这个属性是只要展开或者关闭就会触发，最终陷入了死循环