el-table은 테이블 행 및 편집 가능한 셀의 동적 추가/삽입/삭제를 구현합니다.
효과는 다음과 같습니다.
- 테이블 끝에 새 행을 추가하려면 "새 행 추가"를 클릭하고 셀 내용을 편집할 수 있습니다.
- 녹색 + 버튼을 클릭하여 지정된 행 뒤에 행을 삽입합니다.
- 지정된 행을 삭제하려면 빨간색 - 버튼을 클릭하십시오.
원리: 테이블은el-table
동적 순환을 통해 생성됩니다 . 배열이 추가되고 삭제되는 한 효과를 얻을 수 있습니다.tableData
여기서 요소를 사용 하고 원래 요소도 사용할 수 있습니다. 이유는 같습니다.tableData
el-table
<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>