Idea de implementación:
Recientemente me encontré con un requisito para aumentar dinámicamente las filas y las columnas. Cuando obtuve el requisito, quería usar el método que viene con el-table para lograrlo, pero después de probarlo, descubrí que no podía cumplir con el requisito deseado. No hay más remedio que escribir de forma nativa sobre la base de el-table.
La idea general es la siguiente:
1. Primero, separe las filas y las columnas que deben agregarse dinámicamente en la tabla, defina una lista de datos de matriz para almacenar los datos de la nueva fila y defina una lista de columnas de matriz para almacenar los datos de la nueva columna.
2. A continuación, agregue un nuevo botón delante de los datos en la columna especificada y, cuando haga clic en el nuevo botón, solicite a la interfaz que obtenga los datos.
3. Luego procese los datos obtenidos, envíe los datos del contenido de la tabla a la lista de datos y envíe los datos del contenido del encabezado a la lista de columnas. Tenga en cuenta que si la interfaz no devuelve los datos del encabezado, debe crear el valor clave de la columna correspondiente y almacenarlo en columnList según sus necesidades específicas.
(1) Las filas se pueden agregar directamente después de la fila existente, o se puede agregar una nueva fila después de la fila especificada. Por ejemplo: agregue una nueva línea después de la primera línea, use empalme para agregar. empalme (línea especificada, 0, datos de nueva línea agregados)
(2) Haga clic en qué línea para agregar una nueva línea después de esa línea. Idea: obtenga el índice de la fila en la que se ha hecho clic actualmente y agréguelo mediante empalme. empalme (fila especificada, 0, nuevos datos de fila agregados)
4. Finalmente, use dataList para el-table: data="dataList" y columnList para usar
5. Lo anterior es la idea de agregar nuevas filas y columnas. Si desea eliminar filas y columnas, debe operar dataList y columnList mediante empalme o división. Elimina la posición de índice especificada.
El código general es el siguiente:
<el-table :data="dataList">
<el-table-column label="姓名" prop="name"></el-table-column>
<!--动态列-->
<el-table-column v-for="(it, index) in columnList" :key="index" :label="it.label">
<!--动态行-->
<template slot-scope="scope">
<i class="el-icon-circle-plus-outline" @click="handleAddRow(scope.row, scope.$index)" />
<span>{
{
scope.row.value}}</span>
// 根据项目需求进行其他逻辑处理
</template>
</el-table-column>
</el-table>
export default {
data() {
return {
dataList: [], // 表格数据
columnList: [], //表头数据
}
},
methods: {
// 动态增加行
async handleAddRow(row, index) {
const data = await this.接口()
data.forEach(d => {
// 列添加
this.columnList.push({
label: '年龄' })
// 行添加
this.dataList.splice(index, 0, d)
})
}
}
}
Conclusión: lo anterior es la idea general de agregar dinámicamente filas y columnas a el-table, puede usarlo como referencia y luego refinarlo según las necesidades específicas. ! ! Por favor, señale las deficiencias, gracias.