el-table implementa la adición/inserción/eliminación dinámica de filas de tabla y celdas editables
El efecto es el siguiente:
- Haga clic en "Agregar una nueva fila" para agregar una nueva fila al final de la tabla y se puede editar el contenido de la celda.
- Haga clic en el botón verde + para insertar una fila después de la fila especificada
- Haga clic en el botón rojo para eliminar la fila especificada.
Principio: la tablael-table
se genera a través de un ciclo dinámicotableData
. Siempre quetableData
se agregue y elimine la matriz, se puede lograr el efecto.
El elemento se usa aquíel-table
, y el original también se puede ser utilizado La razón es la misma.
<template>
<div class="container">
<el-button
type="primary"
size="mini"
icon="el-icon-circle-plus-outline"
@click="addRow"
style="margin-bottom: 20px"
>新增一行</el-button
>
<el-table :data="tableData" border>
<el-table-column
label="序号"
align="center"
type="index"
fixed
sortable
/>
<el-table-column label="列1" prop="colcumn1" align="center">
<template slot-scope="scope">
<div class="flex align-center">
<el-input v-model="scope.row.colcumn1" />
</div>
</template>
</el-table-column>
<el-table-column label="列2" prop="colcumn1" align="center">
<template slot-scope="scope">
<div class="flex align-center">
<el-input v-model="scope.row.colcumn2" />
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="success"
icon="el-icon-plus"
circle
size="small"
@click="addRowIndex(scope.$index)"
></el-button>
<el-button
type="danger"
icon="el-icon-minus"
circle
size="small"
@click="delRow(scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
tableData: [],
};
},
mounted() {
},
methods: {
// 增加一行
addRow() {
const row = {
colcumn1: "",
colcumn2: "",
};
this.tableData.push(row);
},
// 删除指定行
delRow(index) {
this.tableData.splice(index, 1);
},
// 指定位置插入行
addRowIndex(index) {
const row = {
colcumn1: "",
colcumn2: "",
};
this.tableData.splice(index + 1, 0, row);
},
},
};
</script>
<style scoped>
.container {
padding: 50px;
}
</style>