1.el-table的表格合并
table里面的数据 现在想通过年级对表格的数据进行部分的合并
tableData:[
{
id: 1,
name: '张三',
grade: '一年级',
class: '一班',
score:'80'
},
{
id: 2,
name: '李四',
grade: '一年级',
class: '三班',
score:'67'
},
{
id: 3,
name: '李四六',
grade: '一年级',
class: '三班',
score:'73'
},
{
id: 4,
name: '王五',
grade: '二年级',
class: '五班',
score:'88'
},
],
翻阅element官网，发现其实已经有现成的列子的
官方原话是：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
目前来看并没有给出rowspan，colspan的具体含义的。
这里也是通过百度知道（https://blog.csdn.net/qq_21041889/article/details/80901475），其实也是原生标签的属性。那么我们就大致了解到了合并思路，用span-method方法就必要知道是我们想要合并的表头是哪几栏，那么当前我想合并是年级，其次是我们要知道rowspan要纵向跨越的行数，那我们差多已经能想到怎么去定义出合理的数据提供给span-method使用了
mergeObj: {
class：[2,0,1] 这里代表第一行rowspan要去纵向去跨越两行，第二行不跨越，第三行跨越一行，也就是形成1，2 行的class只有一个单元格的情况
},
mergeArr: ['class'],
数据设计格式设计好后就要通过table的数据去写转换方法了
//let data = tableData
exchageData(data){
this.mergeArr.forEach((key,pindex) => {
let count = 0 //记录当前循环的行
this.mergeObj[key] = [] //记录需要合并那个表头（年级）的合并情况
data.forEach((item, index) => {
if(index === 0) {
this.mergeObj[key].push(1); //第一行数据直接占位
} else {
if(item[key] === data[index - 1][key]) {
//如果这一行的年级和上一行的年级相等，上一行的年级单元格纵向需要多跨越一行，并且本行 的单元格为0代表不展示
this.mergeObj[key][count] += 1;
this.mergeObj[key].push(0);
} else {
//如果不等，记录当前行，推入一个1代表这一行的年级先占位
count = index; // 记录当前位置
this.mergeObj[key].push(1)
}
}
}
}
}
我们准备好数据格式后，那么我们就把数据给span-method使用
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// column.property拿到属性 判断列的属性（是否是class）
if (this.mergeArr.indexOf(column.property) !== -1) {
// 判断其值是不是为0（mergeObj.class:[2,0,1]）
if (this.mergeObj[column.property][rowIndex]) {
return [this.mergeObj[column.property][rowIndex], 1];
} else {
//单元格消失
return [0, 0];
}
}
},
下面上vue版的完整代码
<template>
<div class="list-page-container">
<div style="padding:20px;">
<el-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column prop="id" label="序号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="class" label="年级"></el-table-column>
<el-table-column prop="grade" label="班级"></el-table-column>
<el-table-column prop="score" label="分数"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'APP',
data () {
return {
tableData:[
{
id: 1,
name: '张三',
class: '一年级',
grade: '一班',
score:'80'
},
{
id: 2,
name: '李四',
class: '一年级',
grade: '三班',
score:'67'
},
{
id: 3,
name: '李四六',
class: '一年级',
grade: '三班',
score:'73'
},
{
id: 4,
name: '王五',
class: '二年级',
grade: '五班',
score:'88'
},
],
mergeObj: {},
mergeArr: ['class', 'grade'],
}
},
methods: {
getSpanArr(data) {
this.mergeArr.forEach((key, index1) => {
let count = 0; // 用来记录需要合并行的起始位置
this.mergeObj[key] = []; // 记录每一列的合并信息
data.forEach((item, index) => {
// index == 0表示数据为第一行，直接 push 一个 1
if (index === 0) {
this.mergeObj[key].push(1);
} else {
//实际开发中多用id去合并
if (item[key] === data[index - 1][key]) {
this.mergeObj[key][count] += 1;
this.mergeObj[key].push(0);
} else {
// 如果当前行和上一行其值不相等
count = index; // 记录当前位置
this.mergeObj[key].push(1); // 重新push 一个 1
}
}
});
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 判断列的属性
if (this.mergeArr.indexOf(column.property) !== -1) {
// 判断其值是不是为0
if (this.mergeObj[column.property][rowIndex]) {
return [this.mergeObj[column.property][rowIndex], 1];
} else {
// 如果为0则为需要合并的行
return [0, 0];
}
}
},
},
created () {
},
mounted () {
this.getSpanArr(this.tableData)
},
}
</script>
2.el-table表格的拖拽排序
这里主要通过sortable.js来实现
npm i sortablejs -s
<template>
<div>
<el-table :data="tableData" border style="margin-bottom:24px;">
<el-table-column
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label" />
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'APP',
data () {
return {
col:[{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}],
dropCol:[
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
tableData:[
{
id: '1',
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 100 弄'
},
{
id: '2',
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 200 弄'
},
{
id: '3',
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 300 弄'
},
{
id: '4',
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 400 弄'
}
]
}
},
methods: {
columnDrop() {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
let value = this.dropCol
const oldItem = value[evt.oldIndex]
value.splice(evt.oldIndex, 1)
value.splice(evt.newIndex, 0, oldItem)
}
})
},
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
Sortable.create(tbody, {
onEnd:({ newIndex, oldIndex }) => {
if (newIndex == oldIndex) return
this.tableData.splice(newIndex,0,this.tableData.splice(oldIndex, 1)[0]
)
let newArray = this.tableData.slice(0)
this.tableData = []
nextTick(()=> {
this.tableData = newArray
})
}
})
}
},
created () {
},
mounted () {
document.body.ondrop = function (event) {
event.preventDefault(); //用于取消事件的默认行为，比如拒绝拖拽元素的默认行为；
event.stopPropagation(); //用于阻止事件冒泡，避免出现多重事件响应
}
this.rowDrop()
this.columnDrop()
},
}
</script>
<style lang="scss" scoped>
</style>
document.querySelector('.el-table__header-wrapper tr')
document.querySelector('.el-table__body-wrapper tbody')
换成其他的ui框架的tr，tbody应该也可以实现，这个还没测试过！！！
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
