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


Posted in Javascript onMay 09, 2020

一、分析需求

这里先上一张图说明 需求

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

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

渲染出一个这样子的 表格

res 数据:

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

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

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

二、代码实现:

<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>
    <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实现表格嵌套、多个表格共用一个表头的方法

三、知识点总结:

为什么要采用这种方式解决(渲染)?
① . 项目用的UI组件是Element,它的Table表格组件,没有直接处理行的操作。
② . el-table,它是通过注入data对象数组,并在el-table-column 中用prop属性来对应对象中的键名来填入数据,从而渲染出渲染表格。其中el-table-column表示一个列,label属性来定义表格的列名,即对象的一个键名代表一列;
③ . 没想到更优的解决办法,O(∩_∩)O哈哈~

多个表格共用一个表头时,注意:
①.   需做判断,同时注意label的值。
②.  当el-table-column 的属性label无值的时候,还是会占用空间,故当前表格在页面上会出现一个代表表头的空行,需要手动更改(重写)Element表格的 thead样式

table表格嵌套的时候,注意:
① . Element的Table组件可 自定义列模板,主要是利用它实现表格嵌套部分,通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,更多用法参考官网。
②.  Element的Table组件可 合并行或列 ,多行或多列共用一个数据时,可以合并行或列;通过给table传入span-method方法可以实现合并行或列,参考上述代码的 **objectSpanMethod**方法(该表格的第一列需要合并多行——合并渲染表格的data数组的长度那么多行) 或者官网。

到此这篇关于Element实现表格嵌套、多个表格共用一个表头的方法的文章就介绍到这了,更多相关Element 表格嵌套内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
JS原形与原型链深入详解
May 09 #Javascript
JavaScript中的this妙用实例分析
May 09 #Javascript
JavaScript中继承原理与用法实例入门
May 09 #Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
JavaScript进阶(四)原型与原型链用法实例分析
May 09 #Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 #Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 #Javascript
You might like
神族 PROTOSS 概述
2020/03/14 星际争霸
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
google地图的路线实现代码
2009/08/20 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python中functools模块的常用函数解析
2016/06/30 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
人机交互程序 python实现人机对话
2017/11/14 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python @property原理解析和用法实例
2020/02/11 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
《最后的姿势》教学反思
2014/02/27 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis