elementUI中的table的数据实现全部展开和收起功能

最新推荐文章于 2024-09-12 09:46:44 发布

weixin_46156770

最新推荐文章于 2024-09-12 09:46:44 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/122171613

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何使用elementUI的table组件，通过row-key属性和toggleRowExpansion方法来实现数据的全部展开和收起功能。

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

elementUI中的table的数据实现全部展开和收起功能

用row-key这个属性和toggleRowExpansion这个方法即可实现

在这里插入图片描述

<template>
<el-table :data="tableData" row-key="id" class="table" ref="table">
          <el-table-column prop="resourceName" label="资源名称" align="center">
          </el-table-column>
          <el-table-column prop="resourceType" label="资源类型" align="center">
          </el-table-column>
          <el-table-column prop="order" label="显示顺序" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span :class="scope.row.status ? 'typeActive' : ''">{{
                scope.row.status ? "启用中" : "已停用"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="addResource(scope.row)"
                type="text"
                size="small"
                >新增</el-button
              >
              <el-button
                @click="updateHandle(scope.row)"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="deleteHandle(scope.row)"
                >删除</el-button
              >
              <el-button type="text" size="small" @click="blockUp(scope.row)">{{
                scope.row.enabledFlag ? "停用" : "启用"
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
</template>
<script>
 export default {
   data(){
    return {
     tableData:[]//表格数据
  }
},
methods:{
// 遍历表格数据
    forTableData(arr,isExpand){
        arr.forEach(i =>{
            this.$refs.table.toggleRowExpansion(i,isExpand);
            if(i.children){
                this.forTableData(i.children,isExpand)
            }
        })
    },
    //展开
    expand() {
        this.forTableData(this.tableData,true)
    },
    // 收起
    packUp() {
        this.forTableData(this.tableData,false)
    },
}
}
</script>