el-table 表格展开与折叠

按钮控制点击全部展开再次点击全部关闭

<button class="table_btn ml10" @click="handleExpand"><i class="iconfont" :class="isExpand?'icon-add_bd':'icon-reduce_bd'"></i> {{isExpand?'全部折叠':'全部展开'}}</button>

表格代码

<el-table:data="tableData"style="width: 100%"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand"><el-form-item label="商品名称"><span>{{ props.row.name }}</span></el-form-item><el-form-item label="所属店铺"><span>{{ props.row.shop }}</span></el-form-item><el-form-item label="商品 ID"><span>{{ props.row.id }}</span></el-form-item><el-form-item label="店铺 ID"><span>{{ props.row.shopId }}</span></el-form-item><el-form-item label="商品分类"><span>{{ props.row.category }}</span></el-form-item><el-form-item label="店铺地址"><span>{{ props.row.address }}</span></el-form-item><el-form-item label="商品描述"><span>{{ props.row.desc }}</span></el-form-item></el-form></template></el-table-column><el-table-columnlabel="商品 ID"prop="id"></el-table-column><el-table-columnlabel="商品名称"prop="name"></el-table-column><el-table-columnlabel="描述"prop="desc"></el-table-column></el-table>

data数据

data() {return {isExpand:true,//全部展开tableData:[]}
},
mountend:{let self = this;self.$nextTick(()=>{//可以axios拿到数据调用 默认全部展开self.forArr(self.tableData,self.isExpand)})
},
methods:{handleExpand() {this.isExpand = !this.isExpandthis.$nextTick(() => {this.forArr(this.tableData, this.isExpand)})},// 遍历forArr(arr, isExpand) {arr.forEach(i => {this.$refs.multipleTable.toggleRowExpansion(i, isExpand)if (i.children) {this.forArr(i.children, isExpand)}})},
}

el-table 表格展开与折叠相关推荐

html表格展开明细,Element-ui的Table表格展开行功能
业务需要表格能够展开某一行,但组件中只能展开所有行,或者用table的树形数据(row 中需包含 children字段),可以通过控制 row-class-name来定义表格中需要展开的行. 通过设置 ...
基于iview2/3组件的Table表格树展开/折叠
基本iview2/3组件的Table表格树折叠展开,其实就是展开的时候插入行,收缩的时候删除行 {title: '名称',key: 'name',minWidth: 200,ellipsis: tru ...
element Table表格实现前x行恒展示，不会被折叠，设置点击表头按钮排序。
table表格前X行恒展示不会被折叠. 表头筛选按钮示意图: // data --渲染的数据(每一列每一行),请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的 ...
Ant Design Vue子表格展开只展开一行，其他行折叠
背景因为我的子列表数据都是用的一个变量,所以需要折叠其他的,要不然多个表格展开后,数据渲染都是一样的下列列表是只可以展开一列的: 第一步: 直接抄我箭头指的那三行即可 :row-key=" ...
element-plus table表格换行变色以及部分el自带样式的修改
element-plus table表格换行变色次处为表头颜色修改 :header-cell-style="{ background: '#0B3357' }" 在el-tabl ...
可折叠的table表格
公司要求把表格改为可折叠的树结构,所以临时做的一个demo,考虑到整齐的问题,所以只在第一列做了个缩进,稍有不足请见谅 <title>jquery表格展开折叠代码</title> ...
layui的数据表格展开
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...
el-table表单一键展开折叠，展开部分后一键全部展开或折叠
实现功能: 1.表单一键展开或者一键折叠 2.表单点击展开一部分后,再次点击展开或折叠按钮可以全部展开或全部折叠 3.完整代码在最后 1.建立el-table的树形结构 1.ref="tab ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...

el-table 表格展开与折叠

el-table 表格展开与折叠相关推荐

最新文章

热门文章