技术文章
当前位置:首页 > vue.js技术文章 > elementUI table表格动态合并的示例代码

elementUI table表格动态合并实例

  • 发布时间:
  • 作者:码农之家原创
  • 点击:92

这篇文章主要知识点是关于elementUI、table、动态合并、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF出版:人民邮电出版社作者:纪尧姆·周
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

elementUI table表格动态合并的示例代码

1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo,做的很直白,不过不太符合业务。在网上找了篇文章参考了一下

2.效果图如下:

elementUI table表格动态合并的示例代码

在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。

3.代码:

//合并单元格 二维数组-> 根据“标识”去遍历数据
data() {

return {
  spanArr: [], //遍历数据时,根据相同的标识去存储记录
  pos: 0 // 二维数组的索引
}
}
// methods中定义方法
getSpanArr(data) {

let that = this
//页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
that.spanArr = []
that.pos = 0
//遍历数据
data.forEach((item, index) => {
  //判断是否是第一项
  if (index === 0) {
    this.spanArr.push(1)
    this.pos = 0
  } else {
    //不是第一项时,就根据标识去存储
    if (data[index].moldName === data[index - 1].moldName) {
      // 查找到符合条件的数据时每次要把之前存储的数据+1
      this.spanArr[this.pos] += 1
      this.spanArr.push(0)
    } else {
      // 没有符合的数据时,要记住当前的index
      this.spanArr.push(1)
      this.pos = index
    }
  }
 })
console.log(this.spanArr, this.pos)
},
// 列表方法
objectSpanMethod({rowIndex, columnIndex}) {

// 页面列表上 表格合并行 -> 第几列(从0开始)
// 需要合并多个单元格时 依次增加判断条件即可
if (columnIndex === 3) {
  // 二维数组存储的数据 取出
  const _row = this.spanArr[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
    rowspan: _row,
    colspan: _col
  }
  //不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false
} else {
  return false
}
}
created() {

let data = xxxxxxxxx
this.getSpanArr(data)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue-cli开发时ajax跨域的方法、 Vue2.0利用 v-model 实现组件、 elementUI table表格动态合并、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:webstorm中vue语法的支持知识点总结

下一篇:vue中获取token写进header的实例方法

展开 +

收起 -

elementUI 相关电子书
学习笔记
网友NO.343049

vue+ElementUI实现订单页动态添加产品数据效果实例代码

这两天学习了ElementUI基于vue2.0开发学习,这个知识点挺多的,而且很重要,所以,今天添加一点小笔记。 使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果,并自动计算总价。代码直接保存为html文档,使用浏览器打开即可查看效果。 效果图: html head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" / !-- 引入element样式 -- link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" title订单页面/title /head body div id="orderTest" el-dialog title="产品库" v-model="dialogTableVisible" el-table :data="list" el-table-column property="name" label="产品名称" width="150"/el-table-column el-table-column property="price" label="单价" width="200"/el-table-column el-ta……

网友NO.230339

Vue的elementUI实现自定义主题方法

使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多) 第一种方法:使用命令行主题工具 使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍) 一、安装工具 1,安装主题工具 npm i element-theme -g 2,安装chalk主题,可以从 npm 安装或者从 GitHub 拉取最新代码 # 从 npmnpm i element-theme-chalk -D# 从 GitHubnpm i https://github.com/ElementUI/theme-chalk -D 二、初始化变量文件 et -i [可以自定义变量文件,默认为element-variables.scss] ✔ Generator variables file 这时根目录下会产生element-variables.scss(或自定义的文件),大致如下: $--color-primary: #409EFF !default;$--color-primary-light-1: mi……

网友NO.520592

详解elementui之el-image-viewer(图片查看器)

前言 随着版本的更新Element UI新增了新的组件,例如:Image,没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。 这是官方文档中有写的,但是我想不使用Image组件又想使用预览大图的功能是否可行呢? 答案是当然可以。 使用方法 翻看了Image的源码,发现大图预览是一个小组件image-viewer,打开看看它的props,如下 props: { urlList: { type: Array, default: () = [] }, zIndex: { type: Number, default: 2000 }, onSwitch: { type: Function, default: () = {} }, onClose: { type: Function, default: () = {} } } 我们需要使用到的就只有urlList与onClose两个属性 ,一个用来放图片链接一个用来关闭查看器。 需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。 template div el-button @click="onPreview"预览/el-button el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" / /di……

网友NO.411562

基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成; 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单,那我们的写法就要写成: 重点在prop属性 template v-for="(k,index) in formData.lists" el-form-item :ref="index+'concatValue'" :prop="'lists.' + index +'.concatValue'" :rules="k.rules" el-input v-model="k.concatValue"/el-input /el-form-item/template 2.因为我选择了根据类型动态修改校验规则,而不是切换不同类型的输入框, 注意看下上文代码中的ref和rules, 当类……

网友NO.800313

elementUI Tree 树形控件的官方使用文档

Tree 树形控件---官方文档地址 用清晰的层级结构展示信息,可展开或折叠。 基础用法 基础的树形结构展示。 el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"/el-tree script export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' } }; }, methods: { handleNodeClick(data) { console.log(data); } } };/script 可选择 适用于需要选择层级时使用。本例还展示了动态加载节点数据的方法。 el-tree :props="props" :load="loadNode" lazy show-checkbox @check-c……

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息