vue element实现表格合并行数据

本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下

支持不分页的表格数据，分页的表格数据还有小bug

<template>
 <el-container>
 <el-main>
 <el-table
 :data="tableData"
 border
 style="width: 100%"
 :span-method="objectSpanMethod" //添加这个实现行数据合并
 >
 <el-table-column label="序号" prop="id" align="center"></el-table-column>
  <el-table-column label="名字" prop="screenName" align="center"></el-table-column>
  <el-table-column label="时间1" prop="startTime" align="center"></el-table-column>
  <el-table-column label="时间2" prop="endTime" align="center"></el-table-column>
 </el-table>
 </el-main>
 </el-container>
</template>

<script>
export default {
 name: "Formtableyes",
 data() {
 return {
 //合并行
 spanArr: [], //声明一个数组
 tableData: [
 { id: 1, screenName: "LHC", startTime: "12", endTime: "1231" },
 { id: 1, screenName: "LHC", startTime: "12", endTime: "123" }
 ]
 };
 },
 mounted: function() {
 this.tableDatas();  //加载数据就调用该方法
 },
 methods: {
 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
 if (columnIndex === 0) {   //合并第一列
 const _row = this.spanArr[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
  rowspan: _row,
  colspan: _col
 };
 }
 if (columnIndex === 1) {   //合并第二列
 const _row = this.spanArr[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
  rowspan: _row,
  colspan: _col
 };
 }
 // if (columnIndex === 2) {   //合并第三列
 // const _row = this.spanArr[rowIndex];
 // const _col = _row > 0 ? 1 : 0;
 // return {
 // rowspan: _row,
 // colspan: _col
 // };
 // }
 },
 tableDatas() {
 let contactDot = 0;
 this.tableData.forEach((item, index) => {
 item.index = index;
 if (index === 0) {
  this.spanArr.push(1);
 } else {
  if (item.id === this.tableData[index - 1].id) {
  this.spanArr[contactDot] += 1;
  this.spanArr.push(0);
  } else {
  this.spanArr.push(1);
  contactDot = index;
  }
 }
 });
 },

 }
};
</script>
<style scoped>
.ptselect {
 width: 100%;
}
</style>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现数据表格合并列rowspan效果

    Vue实现数据表格合并列rowspan效果

    背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩. html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: <table> <thead> <tr> <th>姓名</th> <th>课程数</th> <th>课程名称</th> <th>成绩</th> </tr> </thead> <

  • vue通过数据过滤实现表格合并

    vue通过数据过滤实现表格合并

    基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉. 所以,针对每一行数据 ,用rowspan和display来控制每一个单元格的合并行数和是否显示 代码 <table id="search_tabl

  • vue.js实现表格合并示例代码

    vue.js实现表格合并示例代码

    前言 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路 原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td

  • Vue Elenent实现表格相同数据列合并

    Vue Elenent实现表格相同数据列合并

    本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下 作者:秋名 思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并.(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰.) template: <el-table :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性 > Js: da

  • vue element实现表格合并行数据

    vue element实现表格合并行数据

    本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> <el-main> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" //添加这个实

  • 利用vue + element实现表格分页和前端搜索的方法

    前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理

  • vue element table 表格请求后台排序的方法

    1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin

  • vue+element实现表格新增、编辑、删除功能

    vue+element实现表格新增、编辑、删除功能

    几天前,需要做一个需求:新增一个xml文件时,添加数量不确定.属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样. 可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于实现了,代码.思路以及效果图如下: 1 html部分: <el-button type="success" @click="addRow(tableData)"&

  • vue+element table表格实现动态列筛选的示例代码

    vue+element table表格实现动态列筛选的示例代码

    需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen

  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q

  • Vue+Element树形表格实现拖拽排序示例

    目录 安装sortablejs 在需要的页面引入 表格加上row-key="id" 树形表格排序(树结构) 方法介绍 注意点 结语 今天给大家分享一下树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装sortablejs npm install sortablejs --save 在需要的页面引入 import Sortable from 'sortablejs' 表格加上

  • vue element table表格相同名称列合并方式

    目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"

  • Vue+Element实现表格单元格编辑

    Vue+Element实现表格单元格编辑

    前言 Element的表格组件并没有给出明确的点击单个单元格进行的编辑的方案,我仔细阅读了官方的文档后,发现这个操作还是可以实现的. 实现原理 1.利用Table组件的cell-click属性,可以获取当前点击的单元格列对应的Dom元素.2.清空所有的名为current-cell的class属性.3.为当前获取的单元格Dom动态添加名为current-cell的class属性.4.控制单元格的input标签的显示隐藏就能实现表格的编辑功能. 代码实现 <template>   <div

随机推荐