于极迷处识迷则处处醒，将难放怀一放则万境宽。

一、el-table展开行（基础可跳过）

1. 展示tag信息

2. 实现添加功能

问题：

二、控制el-table展开行（核心）

1.expand-row-keys

2.在添加时更新expands

效果比较：

修改前：刷新表格，展开行消失 ==> 修改后：刷新表格，保存当前操作展开行。

一、el-table展开行（基础可跳过）

参考element UI：Element - The world's most popular Vue UI framework

通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

1. 展示tag信息

效果：每行组合数据展示包含的产品名称信息。后端返回的数据结构如下：

<el-table v-loading="loading" stripe :data="groupList"><el-table-column type="expand" prop="productData"><template slot-scope="scope"><div class="tag-content"><divclass="tag-item":key="tag.prdtName"v-for="tag in scope.row.productData"><el-tag closable style="margin: auto" type="danger">{{tag.prdtName}}</el-tag></div></div></template></el-table-column><el-table-column label="序号" prop="index" width="55"><template slot-scope="scope"><span>{{ scope.$index + 1 }}</span></template></el-table-column><el-table-column label="组合编号" align="center" prop="groupCode" /><el-table-column label="组合名称" align="center" prop="groupName" /><el-table-column label="产品个数" align="center" prop="productNum" />
</el-table>

至此可以完成全部tags的展示，且满足样式要求一行只展示三个。

.tag-item {width: 33%;margin-bottom: 10px;display: flex;justify-content: center;
}

2. 实现添加功能

只需要在刚才代码的后面添加tag实现新增功能即可

<div class="tag-item"><el-buttonclass="button-new-tag"size="small"@click="AddProduct(scope.row)">+ 新产品</el-button>
</div>

addProduct（）函数中主要：显示dialog==> 清空弹框form表单

问题：

功能已经实现，但是每次操作之后el-table的展开行都关闭了这样用户体验很不友好。这是el-table不是很友好的地方，每次页面刷新都会默认关闭所有的行。

希望：对于每次展开行的操作，操作之后该行继续展开。

二、控制el-table展开行

1.expand-row-keys

expand-row-keys：可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。

实现思路：创建一个expends数组，用于存储展开的keys。每次点击添加时，将该行的id存放进去。

只需要给table添加如下两行代码

 row-key="id"
:expand-row-keys="expands"

2.在添加时更新expands

在AddProduct（）时记录下当前的行id

// 添加产品对话框AddProduct(row) {this.open = true;this.groupId = row.id;// 表格置空this.form = {};// console.log(this.expands, "[[[[[[expends]]]]]]]]]");this.expands = [];this.expands.push(row.id);// console.log(this.expands, "[[[[[[expends]]]]]]]]]");
},

当然expends可以记录数组，以上只希望记录并保存选中添加行的展开状态。可以根据需要进行修改。

【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行相关推荐

elementui的table展开行显示另一关联子table表的数据
需求:主表table可实现展开行显示关联子table的列表数据 <div class="table-box"><el-tableref="enquir ...
element table 展开行自定义展开方式与触发方式
element官网并没有给我们自定义table行展开的自定义方式与自定义展开按钮,所以只能自己通过一些其他方法达到这个需求直接上代码 <el-table ref="tableRef& ...
Web前端-Vue ElementUI点击Table 索引行获取index处理
需求:在table中row行 index = 0 ,作为区头,数据字符展示 "--" 参考组件 Element - The world's most popular Vue UI ...
ElementUI table标签展开行
一.概述当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能. 官方示例: test.vue <template><el-table:data="tab ...
html表格展开明细,Element-ui的Table表格展开行功能
业务需要表格能够展开某一行,但组件中只能展开所有行,或者用table的树形数据(row 中需包含 children字段),可以通过控制 row-class-name来定义表格中需要展开的行. 通过设置 ...
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染 ...
react-antd table树形数据默认展开行实现以及自定义图标实现及踩坑(defaultExpandedRowKeys,expandedRowKeys)
前言: 最近在做一个权限管理的后台项目,经常涉及到树形数据展示,就用到了antd,table表格树形数据组件.记录一下使用过程的坑. 环境及配置: antd -3.23.6(大版本为antd 3) ...
【elementUI】el-table 展开行默认关闭或打开
第一种方式: 使用 :default-expand-all="isExpand" 优点:方便,简单,页面初始化的时候给 delfault-expand-all 赋值展开或关闭缺点 ...
【ElementUI】el-table 多表格切换导致 expands 展开行仍然会保留的问题（多表格切换时的表格渲染错乱）
首先先叙述一下需求和遇到的问题: 需求: 在这个页面里,我需要去判断查询条件,从而在不同的条件下,展示不同的表格数据,即在不同情况下,展示不同的表格或者说表格的数据列,从而在不同的条件下看到不同的表格 ...

【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行

一、el-table展开行（基础可跳过）

1. 展示tag信息

2. 实现添加功能

问题：

二、控制el-table展开行

1.expand-row-keys

2.在添加时更新expands

【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行相关推荐

最新文章

热门文章

【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行

一、el-table展开行（基础 可跳过）

1. 展示tag信息

2. 实现添加功能

问题：

二、控制el-table展开行

1.expand-row-keys

2.在添加时更新expands

【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行相关推荐

最新文章

热门文章

一、el-table展开行（基础可跳过）