<el-table
:header-cell-style="{'text-align':'left'}"
:cell-style="{'text-align':'left'}"
>
<el-table-column
property="deviceIn"
:show-overflow-tooltip="true"
label="进门设备标识">
el-table-column>
<el-table-column
align="center"
type="selection"
:selectable="checkSelect"
width="55">
el-table-column>
/**
* methods里面
* row:当前行数据
* index:当前第几位
*/
checkSelect (row,index) {
let isChecked = true;
if (row.dealerName === null) { // 判断里面是否存在某个参数
isChecked = true
} else {
isChecked = false
}
return isChecked
},
<div style="display: flex;justify-content: flex-end;;margin-top: 10px">
<el-pagination
background
@size-change="sizeChangeOfLoss"
@current-change="currentChangeOfLoss"
layout="sizes,prev, pager, next,total"
:current-page="pageOfLoss"
:page-size="sizeOfLoss"
:total="totalOfLoss">
el-pagination>
--- table表序号列
<el-table-column
label="序号"
type="index"
width="50">
<template slot-scope="scope">
<span>{{scope.$index+(page - 1) * size + 1}} span>
template>
el-table-column>
//解决多条记录,刷新数据时,序号不归1
refreshData() {
this.initPage();
this.initData();
},
//初始化page
initPage() {
this.total = 0;
this.page = 1;
this.size = 10;
},
//初始化数据方法
initData() {
this.loading = true;
this.getRequest('/card/stu?page=' + this.page + '&size=' + this.size).then(resp => {
this.total = resp.total;
this.tableData = resp.list;
this.loading = false;
})
},
html部分
<div class="group">
<el-table></el-table>
</div>
css部分
// transparent表示透明效果。
<style>
.group > .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent !important;
}
</style>
官网提供的是最基础的用法,在实际需求中多数需要从后台拿数据对某个相同的列进行合并。
<el-table
...
:span-method="objectSpanMethod"
...>
</el-table>
这里注意:每次刷新table的时候也需要将合并列的记录 重新初始化,如下(代码中分页方法):
this.spanArr = [];
this.pos = ‘’;
data() {
return {
...
tableData:[],//表格数据
spanArr: [],//一个空的数组,用于存放每一行记录的合并数
pos:'', //pos是spanArr的索引,需要合并行下标
...
},
mounted() {
...
this.initData();
...
},
methods: {
//初始化数据
initData() {
this.getRequest("/url......" ).then(resp => {
if (resp) {
this.total = resp.total;//分页
this.tableData = resp.list;//数据
this.getSpanArr(this.tableData);
}
})
},
/*合并列 begin*/
getSpanArr(data) {
// data就是我们从后台拿到的数据
for (let i = 0; i < data.length; i++) {
//如果是第一条记录(索引为0),向数组中加入1,并设置索引位置
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;//spanArr的索引
} else {
//如果不是第一条记录,则判断它与前一条记录是否相等
//根据相同 扣分类别名称 进行合并,根据需要可进行修改
if (data[i].proName === data[i - 1].proName) {
//如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 2) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: _col
};
}
},
/*合并列 end*/
//选页
sizeChange(currentSize) {
this.page = 1;
this.size = currentSize;
this.spanArr = [];//用于存放每一行记录的合并数
this.pos = '';//spanArr下标
this.initData();
},
currentChange(currentPage) {
this.size = 10;
this.page = currentPage;
this.spanArr = [];//用于存放每一行记录的合并数
this.pos = '';//spanArr下标
this.initData();
},
}