element表格手风琴

最新推荐文章于 2024-08-26 13:41:10 发布

dapao哥哥

最新推荐文章于 2024-08-26 13:41:10 发布

阅读量827

点赞数 1

分类专栏： element 文章标签： vue+element表格手风琴

本文链接：https://blog.csdn.net/IMTheBeST_/article/details/103459537

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

element表格手风琴

直接上代码

首先在table里面加

 <el-table
        
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          @expand-change="toggleRowExpansion"
        >

row-key这个属性是获取当前行号的，expand-row-keys这个属性是获取到展开的行号的，所以前者为一个单值，而后者是一个数组形式

@expand-change="toggleRowExpansion"为表格行发生变化的监听事件

data() {
      return {
      // 获取row的key值 
        getRowKeys(row) {
            return row.id;
        },
        // 要展开的行，数值的元素是row的key值
        expands: [],
      }
    }

methods:{
    // 这里的row表示当前行,list表示当前展开行的数组
    toggleRowExpansion(row,list){
            if (list.length > 1) {
                this.expands = [];
                this.expands.push(row.id);
            }
        }
}