el-table合并单元格的方式

el-table单元格合并

方法一：element官网给出的案例

<template><div><el-table:data="tableData":span-method="arraySpanMethod"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"sortablelabel="数值 1"></el-table-column><el-table-columnprop="amount2"sortablelabel="数值 2"></el-table-column><el-table-columnprop="amount3"sortablelabel="数值 3"></el-table-column></el-table><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"label="数值 1（元）"></el-table-column><el-table-columnprop="amount2"label="数值 2（元）"></el-table-column><el-table-columnprop="amount3"label="数值 3（元）"></el-table-column></el-table></div>
</template><script>export default {data() {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]};},methods: {arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (rowIndex % 2 === 0) {if (columnIndex === 0) {return [1, 2];} else if (columnIndex === 1) {return [0, 0];}}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { //选择列if (rowIndex % 2 === 0) { //选择行return {rowspan: 2, //合并数量colspan: 1};} else {return {rowspan: 0,colspan: 0};}}}}};
</script>

方法二：网上找的合并数据相同的单元格方法

<el-table:span-method="objectSpanMethod"

export default {data() {return {rowList: [], //合并单元格spanArr: [], //合并单元格position: 0, //合并单元格

  created() {this.rowspan()},

  methods: {rowspan() {this.ZTPF.data.forEach((item, index) => {if (index === 0) {this.spanArr.push(1)this.position = 0} else {if (this.ZTPF.data[index].ZHScore === this.ZTPF.data[index - 1].ZHScore //判断ZHScore列中数据相同的单元格) {this.spanArr[this.position] += 1this.spanArr.push(0)} else {this.spanArr.push(1)this.position = index}}})},//合并单元格objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 14) {const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}}

此方法可通过增加if语句增加判断的列数量

      spanOneArr: [], //合并单元格spanTwoArr: [], //合并单元格positionOne: 0, //合并单元格positionTwo: 0, //合并单元格=======================================================================mounted() {this.rowspan()},======================================================================methods: {rowspan() {this.tableData.forEach((item, index) => {if (index === 0) {this.spanOneArr.push(1)this.spanTwoArr.push(1)} else {if (this.tableData[index].params1 === this.tableData[index - 1].params1) {this.spanOneArr[this.positionOne] += 1this.spanOneArr.push(0)} else {this.spanOneArr.push(1)this.positionOne = index}if (this.tableData[index].params2 === this.tableData[index - 1].params2) {this.spanTwoArr[this.positionTwo] += 1this.spanTwoArr.push(0)} else {this.spanTwoArr.push(1)this.positionTwo = index}}})},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {const _row = this.spanOneArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}if (columnIndex === 2) {const _row = this.spanTwoArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}}`

方法三：通过某一行数据进行判断，合并任意具有列单元格

      rowIndex: '-1', //合并单元格OrderIndexArr: [], //合并单元格hoverOrderArr: [], //合并单元格====================================================mounted() {this.getOrderNumber()},
=====================================================// 获取相同编号的数组getOrderNumber() {let OrderObj = {}this.tableData.forEach((element, index) => {element.rowIndex = indexif (OrderObj[element.params1]) {OrderObj[element.params1].push(index)} else {OrderObj[element.params1] = []OrderObj[element.params1].push(index)}}) // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）for (let k in OrderObj) {if (OrderObj[k].length > 1) {this.OrderIndexArr.push(OrderObj[k])}}},// 合并单元格objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1 || columnIndex === 2) {for (let i = 0; i < this.OrderIndexArr.length; i++) {let element = this.OrderIndexArr[i]for (let j = 0; j < element.length; j++) {let item = element[j]if (rowIndex == item) {if (j == 0) {return {rowspan: element.length,colspan: 1}} else if (j != 0) {return {rowspan: 0,colspan: 0}}}}}}}

el-table合并单元格的方式相关推荐

vue中用table_Vue中table合并单元格用法
地名结果人名性别 {{item.name}} 已完成未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
element plus的table合并单元格
element的table合并单元格就element+中的el-table中的span-method方法的使用和遇到的一些问题如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
table合并单元格宽度自适应
table中合并单元格导致的css样式不同处理方式: 1.每行都拆成一个table. 2.多设置几个单元格的宽度(自适应失效.第一列都设置宽度也有可能失效).
table合并单元格_制作课程表3——合并单元格
由于浏览器兼容问题,. 以及很少被使用, 所以我们将课程表依然使用tr.td元素,结合样式实现出前面案例中效果原来代码: 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课 ...
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...
html table 合并单元格分页,Word表格跨页，合并单元格后，希望跨页的每一页都显示合并单元格的内容（有图）...
回答: 一.使用Excel开始菜单中的合并功能 Excel表格中合并单元格有很多中形式,比如:合并居中.合并单元格.按行合并.跨列居中.合并相同单元格和合并内容.接下来看看具体操作步骤吧! 步骤:选中 ...
bootstrap table合并单元格mergeCell
//对应第一个合并的单元格 mergeCells = function(data, fieldName, colspan, target) { var sort = Array(); ...

el-table合并单元格的方式

el-table单元格合并

方法一：element官网给出的案例

方法二：网上找的合并数据相同的单元格方法

此方法可通过增加if语句增加判断的列数量

方法三：通过某一行数据进行判断，合并任意具有列单元格

el-table合并单元格的方式相关推荐

最新文章

热门文章

el-table合并单元格的方式

el-table单元格合并

方法一：element官网给出的案例

方法二：网上找的合并数据相同的单元格方法

此方法可通过增加if语句增加判断的列数量

方法三： 通过某一行数据进行判断，合并任意具有列单元格

el-table合并单元格的方式相关推荐

最新文章

热门文章

方法三：通过某一行数据进行判断，合并任意具有列单元格