欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

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

时间:2020-05-22|栏目:JavaScript|点击:

这里先上一张图说明 需求

根据后端返回的数据 ( res 是一个数组,它的元素是一个对象,对象里面的 ext 属性是一个对象,它又包含了, default 、 free 和 pay 三个属性,且这三个都是数组格式。):

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

 

渲染出一个这样子的 表格

res 数据:

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

res 的 ext 属性下的三个数组 default 、 free 、 pay ,每一个数组要大的一行(这一行中,第一列是运送到的地址的名字,这里定义的是 area 属性,但后端是未给到这个字段的,可自己处理数据添加该字段 ,这里就不细说了。) 这个 area 属性占据的这一列,在页面的展示效果 应该是多行合并的效果。

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

 

二、代码实现:

<template> <div> <el-table :data="res" > <el-table-column prop="name"> <template slot-scope="scope"> <div> <span>{{scope.row.name}}</span> <div> <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':''" :span-method="objectSpanMethod"> <el-table-column :label="item===scope.row.ext.default?'运送到':''" prop="area"></el-table-column> <el-table-column :label="item===scope.row.ext.default?'首重':''" prop="weight"></el-table-column> <el-table-column :label="item===scope.row.ext.default?'运费':''" prop="first_price"></el-table-column> <el-table-column :label="item===scope.row.ext.default?'续重':''" prop="weight_incre"></el-table-column> <el-table-column :label="item===scope.row.ext.default?'最终运费':''" prop="extend_price"></el-table-column> </el-table> </div> </template> </el-table-column> </el-table> </div> </template> <script> export default { data () { return { // res 参考的是后端返回的数据格式, res: [ { id: 1, dealer_id: 0, name: '成都运费模板', type: 1, ext: { default: [{ area: '默认', type: 1, region: '1', weight: '首重d', weight_incre: '续重d', first_price: '运费d', extend_price: '最终运费d' }], free: [{ area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }, { area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }], pay: [{ area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }] } }, { id: 2, dealer_id: 0, name: '重庆运费模板', type: 2, ext: { default: [{ area: '默认1', type: 1, region: '1', weight: '首重d', weight_incre: '续重d', first_price: '运费d', extend_price: '最终运费d' }], free: [{ area: 'free1', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }, { area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }], pay: [{ area: 'pay1', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay1', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }] } } ] } }, methods: { handleEdit (index, row) { console.log(index, row) }, handleDelete (index, row) { console.log(index, row) }, objectSpanMethod ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex === 0) { let maxLen this.res.forEach(val => { const arr = [val.ext.default.length, val.ext.free.length, val.ext.pay.length] arr.sort((a, b) => a - b)// arr数组 按数字大小从小到大排序 maxLen = arr.pop()// 取出排序后的数组arr中的最后一个元素 }) return { // 这个rowspan应该据 ext的default,pay,free的长度不同来定,取最大长度 rowspan: maxLen, colspan: 1 } } else { return { rowspan: 0, colspan: 0 } } } } } } </script> <style lang="scss"> .layout{ .tab_header{ color:#333; padding:0 5px 0 5px; height:45px; line-height:45px; border:1px solid #eee;display:flex; justify-content: space-between; background:rgb(233, 225, 225); } .operate{ span{ font-size: 14px; margin-right: 20px; margin-right:20px; color:#409EFF; cursor: pointer; } } /* 处理多个表格共用一个表头时,表头处出现多余空行的问题 (label置空后还是占据空间问题) */ .tab-thead-style{ thead{ display: none; } } } </style>

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

三、知识点总结:

上一篇:js根据后缀判断文件文件类型的代码

栏    目:JavaScript

下一篇:JavaScript cookie原理及使用实例

本文标题:Element实现表格嵌套、多个表格共用一个表头的方

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1410.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7