Element实现表格嵌套、多个表格共用一个表头的方法_element表格展开嵌套表格,element嵌套表格 - CSDN文库

53 浏览量更新于2023-03-16 评论收藏 154KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Element实现表格嵌套、多个表格共用一个表头的方法实现表格嵌套、多个表格共用一个表头的方法

一、分析需求一、分析需求

这里先上一张图说明这里先上一张图说明需求需求：：

根据后端返回的数据（ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free

和 pay 三个属性，且这三个都是数组格式。）：

渲染出一个这样子的渲染出一个这样子的表格表格：：

res 数据：

res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板），

res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定

义的是 area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段，这里就不细说了。）这个 area 属性占据的这一

列，在页面的展示效果应该是多行合并的效果。

二、代码实现：二、代码实现：

<template>

<div class="layout">

<el-table :data="res" >

<el-table-column prop="name">

<template slot-scope="scope">

<div class="tab_header">

<span style="font-weight:600;">{{scope.row.name}}</span>

<div class="operate">

<span @click="handleEdit(scope.$index, scope.row)">修改</span>

<span @click="handleDelete(scope.$index, scope.row)">删除</span>

</div>

</div>

<!-- 这里要实现多个表格共用一个表头，故需做判断，当表格要渲染的数据为default这个数组的时候，才显示表头的label值 -

->

<!-- 注意：当label无值的时候，还是会占用空间，故当前表格在页面上会出现一个代表表头的空行，需要手动更改（重

写）Element表格的 thead样式 -->

<div v-for="item in (scope.row.ext)" :key="item.id">

<el-table :data="item" border :class="item!==scope.row.ext.default?'tab-thead-style':''" style="box-sizing: border-box;border-

top:none;" :span-method="objectSpanMethod">

<el-table-column :label="item===scope.row.ext.default?'运送到':''" prop="area"></el-table-column>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38558054

粉丝: 2
资源: 971

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈