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 相关文章推荐
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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
Php部分常见问题总结
2006/10/09 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Django中Forms的使用代码解析
2018/02/10 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
python 实现性别识别
2020/11/21 Python
python 图像增强算法实现详解
2021/01/24 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
现金会计岗位职责
2013/12/05 职场文书
《我的信念》教学反思
2014/02/15 职场文书
法人委托书范本
2014/04/04 职场文书
白血病募捐倡议书
2014/05/14 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
周年庆典答谢词
2015/01/20 职场文书
总经理岗位职责范本
2015/04/01 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python