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

废话不多数先上图片↓



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

上代码了

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>

JS

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

核心

1. row-key 绑定你数据的为ID 也可以是个函数 笔者这用的就是函数
2. 
3. expand-row-keys 绑定的就是一个数组 数组的每一项就是ID了就会自动展开了
4. 
5. @expand-change=“fn” 这个就是控制展时关闭时触发的事件了，笔者初次用的 toggleRowExpansion 这个true 是展开 false 是关闭打开页面时候就崩掉了。
   最后发现@expand-change这个属性是只要展开或者关闭就会触发，最终陷入了死循环

6. 如果table下的子级有缝隙 ↓图

要记得把 header 隐藏掉呀

7. 如果想让部分展开隐藏箭头

:row-class-name=“fn” 设置行的自定义class 可以是个函数

这里写判断就好了
设置CSS
.row-expand-cover .el-table__expand-icon {
visibility: hidden;
}

如想看效果 数据中注释属性 flag 解开就可以了 就会隐藏了

彩蛋~~~

分享给大家笔者上面录制gif的软件，非常好用，笔者也是下载了好几个都是花钱的，最终也是找的免费了。
GifCam 录制gif图片地址 网站可能比较慢 要耐心等待呀 如果下载不下来 要在下方评论呀 我会分享网盘地址的。
这篇文章就到在这里结束啦~~ 欢迎评论呀