我的需求
- 如图,每个人的ID都是唯一的,如果查询条件是人员,前两列,相同姓名合并,相同ID合并
- 如图,如果查询条件是卡号,把卡号从第三列换到第一列,并且仅第一列,相同卡号合并,
我的实现
- 表格用v-for实现,
:data=“list” 中list是从后端获取到的表格数据;
:span-method=“arraySpanMethod” 中arraySpanMethod方法是合并行的方法,可搭配elementui官网查看;
columns 是写在data中的表头的数组,把第三列换到第一列就去操作这个数组
(详细操作请继续往下看)
<!-- 表格控件容器 -->
<div class="table-container">
<el-table
ref="singleTable"
v-loading="listLoading"
highlight-current-row
:data="list"
border
height="calc(100%)"
:fit="true"
:span-method="arraySpanMethod"
>
<el-table-column
v-for="(item,index) in columns"
:key="index"
:label="item.label"
:align="item.align"
:prop="item.value"
:formatter="item.formatter"
/>
<el-table-column
label="操作"
fixed="right"
align="center"
class-name="small-padding fixed-width"
width="150px"
>
<template slot-scope="scope">
<el-button
type="text"
@click="getDetails(scope)"
>详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script>
export default {
data() {
list: [],
// 表头
columns: [{
label: '姓名',
value: 'EmployeeName',
align: 'center'
},
{
label: '员工ID',
value: 'EmployeeID',
align: 'center'
},
{
label: '卡号',
value: 'PositionCardID',
align: 'center'
},
{
label: '开始日期',
value: 'StartDate',
align: 'center'
},
{
label: '结束日期',
value: 'EndDate',
align: 'center'
}]
}
}
</script>
- arraySpanMethod方法,以及getSpanArr方法,getSpanArr方法是处理数据用来记录哪些地方需要合并的;
<script>
export default {
data() {
// getSpanArr方法中需要用到的两个属性
spanArr: [],
pos: 0,
}
}
</script>
//方法都是写在method里的,我只简写了
//data参数是所有数据,attr参数是需要被合并的字段
getSpanArr(data, attr) {
console.log('getSpanArr方法执行')
// console.log(data)
// console.log(attr)
for (let i = 0; i < data.length; i++) { // 第一列
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i][attr] === data[i - 1][attr]) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
}
console.log('this.spanArr')
console.log(this.spanArr)
},
// 合并行的方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
// _row = 0,_col = 0 表示这一次不合并,不显示,
// _row = 2,_col = 1 表示这一次合并第一列的两行
rowspan: _row,
colspan: _col
}
}
//第二个判断是看当前是哪种查询方式,查卡的话第二列不合并
if (columnIndex === 1 && !this.searchByCard) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
// _row = 0,_col = 0 表示这一次不合并,不显示,
// _row = 2,_col = 1 表示这一次合并第一列的两行
rowspan: _row,
colspan: _col
}
}
},
//在查询方法执行后获得到所有数据时,去执行getSpanArr方法就好了,要合并哪一列就把哪一列的字段名传进来
if (this.searchByCard) {
this.getSpanArr(this.list, 'PositionCardID')
} else {
this.getSpanArr(this.list, 'EmployeeID')
}
// 注意:// 每次重新getlist时将合并格子的这两属性重置
this.spanArr = []
this.pos = 0
- 每次更换查询条件(人员或卡号),触发方法,对表头的数组进行操作,更换列的顺序
SelectOptionsChanged() {
console.log('searchTypeChange')
//更换搜索条件
this.SearchType === 0 ? (this.searchByCard = true) : (this.searchByCard = false)
//每次更换都先把‘卡号’列,存到temp中,然后在数组中删掉
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].label === '卡号') {
var temp = this.columns[i] // 声明一个对象保存符合要求的数据
this.columns.splice(i, 1)// 先把符合条件的数据从当前数组中删除
break
}
}
//判断是哪种查询方式,然后把卡号列即temp放到数组的第一个或第三个
// 如果是根据定位卡查询,将卡号列放到第一列
if (this.searchByCard) {
this.columns.unshift(temp)// 通过unshift函数把符合要求的数据放到第一位
// console.log('this.columns')
// console.log(this.columns)
} else {
this.columns.splice(2, 0, temp) // 通过splice函数把符合要求的数据放到第三位
}
this.getList() //更换查询条件后重新查询一次
},