73.elementUI表格展开行实现只展开一行以及打开子表格获取接口数据遍历不到子表格上的问题（已解决）

最新推荐文章于 2023-12-23 11:52:14 发布
最新推荐文章于 2023-12-23 11:52:14 发布
阅读量658 收藏 4
点赞数
分类专栏： Vue JavaScript 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/annexiaobin/article/details/122064100
版权

1.首先说一下点击表格展开行符号调接口获取子表格数据却遍历不上问题

直接将接口数据赋值给子表格绑定的tableData1数组是无法将数据带到子表格里的，需要改成map接口数据，然后将每一个item逐个push到tableData1数组里。

 

 2.怎样才能实现每次只展开一行呢？

这里需要再在外表格上添加两个属性以及在展开子表格方法里添加一些代码：

 

 

 至此，两个问题解决了！

记录一下 防止下次遇到又不会了......

我在在啦 我让让啦
关注
专栏目录
Element-ui中el-table展开行
m0_51431448的博客
05-17 8396
展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key
Vue3 - Element Plus 表格组件 el-table “表格行数据中又嵌套了二维对象数组“，按平级循环渲染(嵌套数组视为同级行数据)， 对嵌套的数组循环展示为表格，智能合并行或列详细教程
最新发布
王佳斌
07-02 3480
vue3，nuxt3，element-plus，table表格组件，el-table，vue3 element表格组件，数据中有二维数组怎么遍历循环显示，表格数据带二级数组怎么循环渲染显示，表格数据中存在一个数组要怎么才能显示到表格，el-table表格合并详细教程示例，table表格如果对象里面还有对象数组那该怎么去渲染，平常都是数组中一个对象渲染成一行，每行中还有嵌套数组怎么办，每个行数据下还有一个数组怎么显示，怎么把表格相同的数据合并为一行，合并上下两行相同数据单元格，合并行或列如果遇到相同单元格就合
【关于element ui使用所遇问题01】element ui表格组件 扩展行展开时通过@expand-change异步加载数据，页面不更新问题，第一次展开没有数据，第二次点击显示
weixin_43624943的博客
12-15 3687
前言 最近在写项目的时候，有个使用el-table内嵌动态table的功能需求，也就是table内嵌table，同时里面的table数据是动态获取的，动态获取动态展开 问题 按照element的table里面的方法，行属性设置了type=‘expand’，也在table里面添加了@expand-change="expandChange"事件监听展开行事件，在监听事件里面动态获取数据赋值给里面展开的table， 问题出现了，第一次点开没数据，第二次点开才有数据 ①：第一次点开效果 ②：第二次展开数据显示出来
element-ui表格展开行每次只能展开一行
小城小永
08-14 443
el-form-item label="商品名称">category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',name: '好滋好味鸡蛋仔',name: '好滋好味鸡蛋仔',name: '好滋好味鸡蛋仔',// 点击展开的时候就会触发这个方法。
实现element-ui的table嵌套表格点击父表格只允许一行展开
weixin_44491927的博客
05-18 2769
嵌套表格的数据是动态获取的，如果打开多行，就会出现打开的所有嵌套列表中显示的是最后一次打开博客的评论。 所以为了处理这个bug,可以设置只可以打开一行，打开下一行的时候，上一行的嵌套表格关闭。
Vue3+Element Plus 中Table同时只能展开一行
2303_77072102的博客
12-23 2542
前言：本文目的——我在el-table中使用expand嵌入了新的table,当点击顶层table行时展开新的table内容并显示，同时内层table需要实现分页效果等。:row-key="" //设置行的唯一标识，用于配合expand-row-keys使用，(行的唯一标识 expand-row-keys存放的值就是行的唯一标识):expand-row-keys="" //设置当前展开行，要求值为数组(白话就是 存放在这个数组的ID会在页面中展开,没有就不会展开)三、在内层设置展开行的书写插槽。
element中el-table，type=‘expand‘展开行，通过@expand-change=‘ ‘事件渲染子table的数据，页面数据未同步
爱菇凉的博客
07-06 5694
需求： 一个table中嵌套另一个table，在点击外层table的‘>’时，获取嵌套table的数据，最终效果图： 遇到的问题： table里面嵌套另一个table的方法，就是在行属性设置了type=‘expand’，也在table里面添加了@expand-change="showManageDetail"事件监听展开行事件，在监听事件里面动态获取数据赋值给里面展开的table，这里出现了，数据已经获取到，但是无法精准的同步到页面渲染，（第一次点击没有数据，第二次点击才会有数据）。 产生问题的根本
vue表格刷新数据_vue+element-ui实现表格某个数据弹窗添加数据，保存后数据更新，再次打开弹窗，数据回显...
weixin_39538693的博客
12-20 3761
实现功能：1、生成数据插入table2、修改table的某个数据，保存后该数据进行更新3、点击table的btn，选择的数据仍是选中状态，数据回显示例-1-选择地址插入表格示例-2-选择指定岗位示例-3-选择岗位出现table里示例-4-打开弹窗之前选择的岗位仍是选中一、页面布局Cascader 级联选择器选择地址插入table，插入的数据可删除，可添加岗位页面布局代码：placeholder="...
【elementUI+vue+el-table】树形数据使用表格呈现+表格自定义合并
栀妹儿的炼丹炉
11-10 4008
我需要合并样式： 后端数据（树形）及我应展示的思路： 获取树形数据并变成列表数据： getOrganizationTree().then((res) => { let that = this; if (res.code == 200) { console.log(res, "准备对接列表的属性接口"); let yqName = res.data.YuanName let yqData = res.data.data // 因为我第一层园区只有一
vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计（每行末尾合计功能）
huihuiliu_的博客
11-18 6863
vue + element 实现可编辑表格、动态渲染表头表格数据、列向数据合计（每行末尾合计） 1，首先得在项目中集成element-ui 安装，注册，具体参照 element-ui的集成 2，我这里使用的vue-cli脚手架搭建的项目，可网上搜索相关知识 3，我的需求，做一个比赛项目打分表，评委可以实现在线打分，表头和表格数据首先都是动态获取后台数据进行渲染，这里我先写成假数据以供大家参考...
element-ui table 只展开一行数据 table数据通过调接口获取
katy_1的博客
12-20 7924
借鉴博客：https://blog.csdn.net/qq_31126175/article/details/79807133 需求：表格展开行只展示一行（其实是为了避开另一个问题：展开多行数据，最后一次展开的数据 会覆盖之前展开行数据） html： <el-table :data="tableData" @expand-change="rowExpand"> ...
element table 点击按钮实现展开效果
canyi8023的博客
02-16 2394
先给展示一下效果 在这块实现点击开关按钮实现展开收起，使用到了官网提供的toggleRowExpansion方法来实现， <el-table-column width="180"> <template slot-scope="scope"> <el-switch v-model="scope.row.isSwitch @chan.
VUE+element UI遍历接口请求数据
weixin_44046781的博客
09-12 1629
js export default{ data(){ return{ //定义空数组接受数据 tableData_violation: [], }, created(){ // 并发发送多个请求 all[] axios.all([this.getTable1Data2(),]) .then(axios.s...
elementui的table展开行显示另一关联子table表的数据
myf0521的博客
11-09 2691
​​​​​需求：主表table可实现展开行显示关联子table的列表数据​ <div class="table-box"> <el-table ref="enquiry" :data="dataList" :expand-row-keys="expands" :row-key="getRowKeys" @row-click="handleRowCl
element-ui 点击某列的一个元素展开当前行
肖肖肖丽珠的博客
01-29 1516
页面效果我希望点击展开看到下面的内容。下面的内容并不在table里面。而是从新访问接口获取的。 table的格式可以使用table外的内容的，所以不用把它展开的内容push进table的变量里面。 <template> <el-table ref="table" border stripe highlight-current-row :data="list" style="width: 800px;"> <el-table-col...
element ui table 展开行中数据通过接口返回时，数据不会渲染 以及 点击时判断expand展开还是闭合
LQ0611的博客
08-29 3573
在使用element ui的表格（table）时，有时候想要在每一行下面增加一个展开行，效果如下： 当展开行中的内容为静态数据或者是随着表格中的数据一起返回的，这个时候渲染是没有问题的。但是当展开行中的内容为根据表格行中数据单独请求接口而返回的，此时则会出现问题：请求到的数据，第一次不会渲染出来，但是当点击其他行在此请求数据时，则会将上一次请求到的数据渲染出来。 出现问题的原因：在数据返回前，表格expand的dom就已经渲染结束 解决问题： （方法1）: 体验不好，可以解决问题，所以不推荐！ 可以在ex
如何用element的expand展开行，只在展开的时候调展开区域数据的接口
ciichen的博客
09-11 2265
需求：很简单，返回表格数据的时候没有展开行区域的数据，只在展开的时候再单独调接口，这样后台处理数据更快一点。 但是真正写起来坑还不少。 坑一： 本来是在data（）里新注册了一个对象存接口调来的数据，结果如果同时打开几行，那后调的数据就会覆盖前者的数据，会导致所有行的展开行数据都一样。（因为本质上它们绑的是同一个对象） 解决方法：把数据分别绑定给每一行，并且由于之前没有detail对象，需要用$set方法给row添加新属性 handleExpand(row) { getDetail(r
element-ui table 展开行
小巧r的博客
04-22 660
实现效果 实现代码 // 当 row 中包含 children 字段时，被视为树形数据。支持子节点数据异步加载。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。 <el-table :data="searchResult" style="width: 100%" height="385" :header-cell-style="{ 'background-color': '#2C2E
element type=“expand“ 折叠面板一次只能打开一个折叠面板且每次拿到当前id调用接口
m0_47483157的博客
02-23 465
设置table \\type="expand"2.expandDetail获取点击行得数据使用如何大于两条就清空第一条。toggleRowExpansion()函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值