Hola a todos, ya estoy de vuelta. Recientemente, un amigo me hizo esa pregunta, es decir, ahora llamo a la interfaz, obtengo un lote de datos de la tabla y luego los muestro en la página, pero los fusiono de acuerdo con la identificación de cada fila y el contenido de esa columna , y luego agregue operaciones como subdatos, editar y eliminar (aquí solo se habla de fusionar tablas)
Directamente en la imagen, la representación directa se ve así
Requisito: fusionar filas de acuerdo con la identificación de la ocupación, la primera columna y la última columna deben fusionarse, ¿cómo hacer esto? Primero, cargue el código de la plantilla. Esto no tiene nada que decir, es una tabla electrónica y la columna que se opera es una ranura de alcance.
<template>
<div>
<el-table :data="tableData" :span-method="spanMethod">
<el-table-column prop="job" label="职业id">
</el-table-column>
<el-table-column prop="ename" label="名字"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template>
<el-button type="success" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>Entre ellos, dado que queremos fusionar celdas, por supuesto que necesitamos usar el método span, y la traducción es la forma de fusionar tablas. En html, aprendimos rowspan y colspan, fusionar filas y fusionar columnas.
El contenido del script se escribirá a continuación, sin más preámbulos, solo suba el código
<script>
export default {
data() {
return {
tableData: [
{
job: 1,
ename: "咕叽咕叽",
age: 21
},
{
job: 1,
ename: "哆啦哆啦",
age: 22
},
{
job: 2,
ename: "后端1",
age: 27
},
{
job: 2,
ename: "后端2",
age: 21
},
{
job: 2,
ename: "后端3",
age: 22
},
{
job: 3,
ename: "主管1",
age: 27
},
{
job: 3,
ename: "主管2",
age: 28
},
{
job: 4,
ename: "总监",
age: 28
},
]
}
},
methods: {
//合并的方法，里面row，colomn是这一行这一列的对象，rowIndex和colIndex就是行列的index 从0-n rowspan表示合并的行 大于1表示要往下合并了，然后下方被合并的rowspan就是0，0代表被合并了，1代表正常情况
spanMethod({ row, column, rowIndex, columnIndex }) {
//columnIndex代表哪几列需要合并，后面会用
let columnArr = [0, 3]
let jobArr = []; //所有职业id 从第一个数据到最后一个
for (let k in this.tableData) {
jobArr.push(this.tableData[k].job)
}
let obj = {}
for (let i = 0; i < jobArr.length; i++) {
if (obj[jobArr[i]] == undefined) {
obj[jobArr[i]] = 1
} else {
obj[jobArr[i]]++
}
}
console.log("obj", obj); //包含每个id以及其出现的次数，为后面合并做铺垫
let spanArr = []; //每一行就是一条数据，该数组每一个值就是当前行的rowspan数
let doneArr = [] //保存被合并了的id，如果再出现，表示被合并
for (let i = 0; i < jobArr.length; i++) {
//看看个数
if (doneArr.includes(jobArr[i])) {
//如果这个id被合并过了，说明刚刚上方有一样的id，这一项就是被合并的
spanArr.push(0)
} else {
//如果没合并，就往下合并，spanArr里推入这个id的个数，在obj中就有
spanArr.push(obj[jobArr[i]])
//别忘了合并完把id放进doneArr中
doneArr.push(jobArr[i])
}
}
//如果是第0列和第3列
if (columnArr.includes(columnIndex)) {
//遍历合并个数的数组
for (let i = 0; i < spanArr.length; i++) {
//如果是该行，行合并个数就是这一项的值，列不合并，所以是1
if (rowIndex == i) {
return {
rowspan: spanArr[i],
colspan: 1
}
}
}
}
}
},
}
</script>Rowspan indica la fila fusionada, mayor que 1 indica que se fusionará hacia abajo, por lo que el rango de filas que se fusionará a continuación es 0, 0 significa que se ha fusionado y 1 significa que es normal (es decir, no fusionado)
Los datos de trabajo reales serán más complicados. En este momento, las columnas/filas que deben combinarse se colocan en una matriz, y luego se usa include para determinar si la columna/fila debe combinarse. Luego calcule spanArr (la matriz de números que deben fusionarse en cada fila) y luego regrese.
La figura final es la siguiente
Esto resuelve el problema, ve y pruébalo!