Vue+el-table实现不规则表格

比如：我们要实现下图这个表格

代码如下：

<template><div><el-table :data="tableData" :span-method="objectSpanMethod" border :header-cell-style="handerMethod"><el-table-column align="center" prop="id" label=""></el-table-column><el-table-column align="center" prop="amount1" label="数据分类"></el-table-column><el-table-column align="center" prop="amount2" label="缴存业务"></el-table-column><el-table-column align="center" prop="amount3" label="提取业务"></el-table-column><el-table-column align="center" prop="amount4" label="贷款业务"></el-table-column><el-table-column align="center" label="业务办理合计"><el-table-column align="center" label="业务办理合计" prop="amount5"></el-table-column><el-table-column align="center" label="" prop="amount6"></el-table-column></el-table-column></el-table></div>
</template>
<script>
export default {data() {return {spanArr: [], // 用于存放每一行记录的合并数tableData: [{id: '业务办理类业务统计量',amount1: '线上服务量小计',amount2: '1',amount3: '2',amount4: '3',amount5: '4',amount6: '4'},{id: '业务办理类业务统计量',amount1: '线上业务小计',amount2: '1',amount3: '2',amount4: '3',amount5: '4',amount6: '4'},{id: '业务办理类业务统计量',amount1: '线下业务小计',amount2: '1',amount3: '2',amount4: '3',amount5: '4',amount6: '4'},{id: '业务办理类业务统计量',amount1: '线上+线下',amount2: '1',amount3: '2',amount4: '3',amount5: '4',amount6: '4'},{id: '业务办理类业务统计量',amount1: '线上占比',amount2: '1',amount3: '2',amount4: '3',amount5: '4',amount6: '4'},{id: '9大渠道服务总量统计',amount1: '9大渠道服务总量统计',amount2: '信息查询',amount3: '信息发布',amount4: '互动交流',amount5: '业务办理',amount6: '线上总计'},{id: '9大渠道服务总量统计',amount1: '9大渠道服务总量统计',amount2: '01',amount3: '02',amount4: '03',amount5: '04',amount6: '05'}]}},mounted() {},methods: {// 隐藏表头handerMethod({ rowIndex }) {if (rowIndex === 1) {// 这里为了是将第二列的表头隐藏，就形成了合并表头的效果return { display: 'none' }}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 对第六、七行 进行合并if (rowIndex === 5) {if (columnIndex === 0) {return [2, 2]} else if (columnIndex === 1) {return [0, 0]}}// 对第一列 第二列 进行合并if (columnIndex === 1 || columnIndex === 0) {// 当 当前行与上一行内容相同时 返回0 0 意味消除if (rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]) {return {rowspan: 0,colspan: 0}} else {let rows = 1// 反之 查询相同的内容有多少行 进行合并for (let i = rowIndex; i < this.tableData.length - 1; i++) {if (row[column.property] === this.tableData[i + 1][column.property]) {rows++}}// 返回相同内容的行数return {rowspan: rows,colspan: 1}}}// 对第一、二、三、四、五行 进行合并if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4) {// 处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示if (columnIndex === 5) {// 定位到5列的一、二、三、四、五行，告诉该单元格合并1行2列return [1, 2]} else if (columnIndex === 6) {// 定位到6列的一、二、三、四、五行，告诉该单元格不显示return [0, 0]}}}}
}
</script>

el-table 行合并

方法一：（直接使用）

<el-table:data="tableData"border:span-method="objectSpanMethod"style="width: 100%"><el-table-columnprop="order"label="序号"align="center"width="50"></el-table-column><el-table-columnprop="name":label="'名称'"align="center"fixed="left"width="70"></el-table-column>
</el-table><script>
export default {name: 'StationsStaTable',data () {return {tableData: [],},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 对第一列 第二列 进行合并if (columnIndex === 1 || columnIndex === 0) {// 当 当前行与上一行内容相同时 返回0 0 意味消除if(rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]){return {rowspan: 0,colspan: 0};}else{let rows = 1;// 反之 查询相同的内容有多少行 进行合并for(let i = rowIndex; i < this.tableData.length - 1; i++){if (row[column.property] === this.tableData[i + 1][column.property]) {rows++;}}// 返回相同内容的行数return {rowspan: rows,colspan: 1};}}}}

方法二：（封装函数）

1、使用

导入js文件，并设置需要合并的列

//导入js文件(文件脚本内容在下文)
import {getRowspanMethod} from '@/hook/el-tables/use-span-method.js'//调用函数并导出需要的合并列函数 注意需要根据
//data为查询到的数据
//['prop1', 'prop2', 'prop3'] 需要合并的列
const spanMethod=getRowspanMethod(data,['prop1', 'prop2', 'prop3'])

在vue页面模板中使用

<!--使用spanMethod方法-->
<el-table :data="data" height="100%" :span-method="spanMethod">
...
</el-table>

2、封装合并的方法

这个文件(use-span-method.js)通过导出一个函数来提供给el-table的和并方法使用

/*** 合并相同数据，导出合并列所需的方法(只适合el-table)* @param {Object} data* @param {Object} rowspanArray*/
export function getRowspanMethod(data, rowspanArray) {/*** 要合并列的数据*/const rowspanNumObject = {};//初始化 rowspanNumObjectrowspanArray.map(item => {rowspanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0, 1);rowspanNumObject[`${item}-index`] = 0;});//计算相关的合并信息for (let i = 1; i < data.length; i++) {rowspanArray.map(key => {const index = rowspanNumObject[`${key}-index`];if (data[i][key] === data[i - 1][key]) {rowspanNumObject[key][index]++;} else {rowspanNumObject[`${key}-index`] = i;rowspanNumObject[key][i] = 1;}});}//提供合并的方法并导出const spanMethod = function({ row, column, rowIndex, columnIndex }) {if (rowspanArray.includes(column['property'])) {const rowspan = rowspanNumObject[column['property']][rowIndex];if (rowspan > 0) {return { rowspan: rowspan, colspan: 1 }}return { rowspan: 0, colspan: 0 }}return { rowspan: 1, colspan: 1 }};return spanMethod;
}

3、vue2/3具体使用

// vue2
import {getRowspanMethod} from '@/hook/el-tables/use-span-method.js'export default {data(){spanMethod:()=>{},list:[],},methods:{// 查询数据方法getData(){this.spanMethod=getRowspanMethod(this.list,['prop1', 'prop2', 'prop3'])}}}// vue3 setup
import {ref ,computed} from 'vue';import {getRowspanMethod} from '@/hook/el-tables/use-span-method.js'// 获取数据存放变量let list=ref([]);//实际根据业务灵活调整const spanMethod=computed(()=>{return getRowspanMethod(list.value,['prop1', 'prop2', 'prop3'])})// 查询数据方法const getData=function(){//查询到数据赋值list.value=[];}

el-table 列合并

objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 处理合计，[1,2]表示合并2行2列，[0,0]表示改行不显示if (rowIndex === 5) {if (columnIndex === 0) {// 定位到0列，告诉该单元格合并1行2列return [1, 2]} else if (columnIndex === 1) {// 定位到1列，告诉该单元格不显示return [0, 0]}}}

el-table表头列合并

<el-table :data="tableData" :header-cell-style="handerMethod"><el-table-column align="center" label="业务办理合计"><el-table-column label="业务办理合计" prop="amount5"></el-table-column><el-table-column label="" prop="amount6"></el-table-column></el-table-column>
</el-table>

 //隐藏表头handerMethod({rowIndex}){if (rowIndex === 1) {//这里为了是将第二列的表头隐藏，就形成了合并表头的效果return {display: 'none'}}},

       <el-table-column label="业务办理合计" prop="amount5"></el-table-column><el-table-column label="" prop="amount6"></el-table-column></el-table-column>


```js//隐藏表头handerMethod({rowIndex}){if (rowIndex === 1) {//这里为了是将第二列的表头隐藏，就形成了合并表头的效果return {display: 'none'}}},

el-table自定义合计

效果图如下：代码实现：

<template><div style='height: 800px;width: 100%;background: #fff;'><el-table  ref="table" border :data="tableData" :span-method="objectSpanMethod" stripe class="table-class" show-summary :summary-method="getNodeSummaries" highlight-current-row><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="name" label="名字" align="center" /><el-table-column prop="sex" label="性别" width="120" align="center" /><el-table-column prop="tiZh" label="体重" width="120" align="center" /><el-table-column prop="num1" label="爬山次数" width="120" align="center" /><el-table-column prop="num2" label="游泳次数" width="120" align="center" /><el-table-column prop="num3" label="健身次数" width="120" align="center" /></el-table></div>
</template><script>
// import { ref } from 'vue'
export default {name: 'aaaa',components: {},props: {},data() {return {tableData: [{       name: '张三',sex: '男',tiZh: 120,num1: 1000,num2: 2000,num3: 3000},{       name: '张四',sex: '女',tiZh: 120,num1: 1000,num2: 2000,num3: 3000},],}},computed: {},mounted() {},methods: {objectSpanMethod() {this.$nextTick(x => {if (this.$refs.table.$el) {var current = this.$refs.table.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");var cell = current.rows[0].cells;cell[0].style.display = "none";cell[1].style.display = "none";cell[2].style.display = "none";cell[3].classList.remove('is-left')cell[3].colSpan = "4";}})},getNodeSummaries(param) {const { columns, data } = param;const sums = [];let arr = [ 'num1', 'num2', 'num3']columns.forEach((column, index) => {if (index === 3) {sums[index] = "合计";return;}if (arr.some(x => column.property === x)) {sums[index] = 0;data.map((item) => {console.log(item)let num = item[column.property];// num = num ? parseFloat(num.replace(/,/gi, "")) : 0;sums[index] = this.accAdd(sums[index], num);});} else {sums[index] = "";}});return sums;},accAdd(arg1, arg2) {let r1, r2, m;try {r1 = arg1.toString().split(".")[1].length;} catch (e) {r1 = 0;}try {r2 = arg2.toString().split(".")[1].length;} catch (e) {r2 = 0;}m = Math.pow(10, Math.max(r1, r2));return ((arg1 * m + arg2 * m) / m).toFixed(2);},}
}
</script><style lang='scss' scoped>.table-class{width: 50%;position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>

Vue+el-table实现不规则表格相关推荐

动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
使用vue+el构建表格_如何使用Vue和VuePress构建文档系统
使用vue+el构建表格介绍 (Introduction) Good documentation is a critical part of a successful project, but a ...
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
vue之table表格的合并
目录 vue之table表格的动态合并 vue之table表格的动态合并后台给数据处理断层 vue之table表格的动态合并后台给数据前端处理断层根据后台数据合并前三列数据 vue之tabl ...
html表格上下移动,Vue实现table上下移动功能示例
本文实例讲述了Vue实现table上下移动功能.分享给大家供大家参考,具体如下: 结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容.列内容.以及此行索引值, ...
element table radio 单选表格实现
实际效果可以自行复制下面代码查看后续可以自己封装成 table 组件 <!DOCTYPE html> <html lang="en"><head&g ...
vue js table colspan rowspan
需求,要写一个菜单权限表.需要做到单元格合并,本来用的antd-vue的表格,然后构造customRender,总感觉有点本末倒置,其实自己实现,更快,而且想改哪里,改哪里.下面是写这个功能前的测试d ...
table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
Bootstrap Table 表头和表格内容不对齐
Bootstrap Table 表头和表格内容不对齐前言原因解决方式思路一思路二思路三前言之前的一次开发中使用到了Bootstrap Table的组件,在使用过程中出现了表头与表格内容 ...

Vue+el-table实现不规则表格

el-table 行合并

方法一：（直接使用）

方法二：（封装函数）

1、使用

2、封装合并的方法

3、vue2/3具体使用

el-table 列合并

el-table表头列合并

el-table自定义合计

Vue+el-table实现不规则表格相关推荐

最新文章

热门文章