vue+elementui實現動態(tài)添加行/可編輯的table

更新時間：2022年07月06日 09:10:43 作者：LBJsagiri

這篇文章主要為大家詳細介紹了vue+elementui實現動態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+elementui實現動態(tài)添加行、可編輯的table的具體代碼，供大家參考，具體內容如下

HTMl代碼塊：

<el-col :span="24">
? ? <el-form-item label="與承租戶同戶籍成員:" :label-width="formLabelWidth">
? ? ? ? <el-table :data="zichandetail.members" :border=true style="width: 99.99%;">
? ? ? ? ? ? <el-table-column type="index" label="序號" width="100"></el-table-column>
? ? ? ? ? ? <el-table-column prop="name" label="姓名" width="150">
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? <el-input v-model="scope.row.name" autocomplete="off" size="small"
placeholder="請輸入姓名"></el-input>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? <el-table-column prop="name" label="與承租人關系" width="150">
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? <el-input v-model="scope.row.relationship" autocomplete="off" size="small" placeholder="請輸入與承租人關系"></el-input>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ?</el-table-column>
? ? ? ? ? ? ?<el-table-column prop="name" label="聯系電話" width="150">
? ? ? ? ? ? ? ? ?<template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ?<el-input v-model="scope.row.mobile" autocomplete="off" size="small"
placeholder="請輸入聯系電話"></el-input>
? ? ? ? ? ? ? ? ?</template>
? ? ? ? ? ? ?</el-table-column>
? ? ? ? ? ? ?<el-table-column prop="name" label="出生年月" width="150">
? ? ? ? ? ? ? ? ?<template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ?<el-date-picker v-model="scope.row.birthday" type="month" placeholder="請輸入出生年月" value-format="yyyy-MM" size="small" class="allwidth">
? ? ? ? ? ? ? ? ? ? ?</el-date-picker>
? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? <el-table-column prop="name" label="工作單位">
? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? <el-input v-model="scope.row.gongzuodanwei" autocomplete="off" size="small" placeholder="請輸入工作單位"></el-input>
? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? <el-table-column label="操作" width="100">
? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">刪除</el-button>
? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? </el-table-column>
? ? ? ? ?</el-table>
? ? ? ? ?<i class="el-icon-circle-plus-outline" @click="addmembers"></i>
? ? ? </el-form-item>
? ?</el-col>
</el-row>

js代碼塊：

1.添加操作

addmembers() {
? ?console.log('與承租戶同戶籍成員');
? ?var member = this.zichandetail.members;
? ?console.log(member);
? ?var length = member.length;
? ?this.zichandetail.members.push(
? ?{
? ? ? id: parseInt(length),
? ? ? name: '',
? ? ? relationship: '',
? ? ? mobile: '',
? ? ? birthday: '',
? ? ? gongzuodanwei: '',
? ?})
?},

2.刪除操作

delmembers(index, row) {
? ?var that = this;
? ?this.$confirm('確認刪除嗎?', '提示', {
? ?confirmButtonText: '確定',
? ?cancelButtonText: '取消',
? ?type: 'warning'
? ?}).then(() => {
? ? ? //點擊確定的操作(調用接口)
? ? ? var hasmembers = that.zichandetail.members;
? ? ? for (var i = 0; i < hasmembers.length; i++) {
? ? ? ? ? if (row.id == hasmembers[i].id) {
? ? ? ? ? ? ? that.zichandetail.members.splice(i, 1);
? ? ? ? ? ? ? // this.$message({ message: '刪除成功', duration: 2000, type: 'success' });
? ? ? ? ? ?}
? ? ? ?}
? ? ?}).catch(() => {
? ? ?//點取消的提示
? ? ? ? ?return;
? ? ?});
},

實現效果：