Vue结合element实现 取消和确认 实时展现数据效果

<template>
<div>
<el-button type="text" @click="dialogFormVisible = true">添加栏目</el-button>
<el-table
:data="tableData"

style="width: 100%">
<el-table-column
prop="id"
label="ID"
>
</el-table-column>
<el-table-column
prop="cname"
label="栏目名称"
>
</el-table-column>
<el-table-column
prop="type"
label="栏目类型">
</el-table-column>
<el-table-column

label="操作"
>

<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
<el-button type="text" size="small" @click="headleDel(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分类添加-->

<el-dialog title="添加栏目" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="分类名称">
<el-input v-model="form.cname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="form.type" autocomplete="off"></el-input>
</el-form-item>

</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button @click="dialogFormVisible=false">取消</el-button>

</div>
</el-dialog>

<!-- 编辑-->
<el-dialog title="修改栏目" :visible.sync="dialogUpdateVisible">
<el-form :model="formUpdate">
<el-form-item label="分类名称">
<el-input v-model="formUpdate.cname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="formUpdate.type" autocomplete="off"></el-input>
</el-form-item>

</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogUpdateVisible=false">取消</el-button>
<el-button type="primary" @click="onSubmitUpdate">提交</el-button>
</div>
</el-dialog>

</div>
</template>

<script>
import Category from ‘../../api/category‘;

let {query, insert,update,del} = Category;
export default {
name: "index",
data() {
return {
tableData: [],
dialogFormVisible: false,
dialogUpdateVisible:false,
form: {
cname: ‘‘,
type: ‘‘
},
formUpdate:{
id:‘‘,
cname:‘‘,
type:‘‘
}
};
},
methods: {
getDate() {
query().then(res => {
this.tableData = res.data.data
})
},
onSubmit() {
insert(this.form).then(res => {
this.dialogFormVisible = false;
if (res.data.code == 0) {
this.form.id = res.data.id;
this.tableData.push(this.form);
this.from = {cname: ‘‘, type: ‘‘}
}
});
},
handleClick(row) {
this.dialogUpdateVisible=true;
this.formUpdate=JSON.parse(JSON.stringify(row));
},
onSubmitUpdate(index,row){

this.$confirm(‘此操作将永久修改, 是否继续?‘, ‘提示‘, {
confirmButtonText: ‘确定‘,
cancelButtonText: ‘取消‘,
type: ‘warning‘
}).then(() => {
update(this.formUpdate).then(res=>{
if (res.data.code==0){
let index=this.tableData.findIndex(ele=>ele.id==this.formUpdate.id);
this.tableData[index]=this.formUpdate

this.dialogUpdateVisible=false
}
});
this.$message({
type: ‘success‘,
message: ‘修改成功!‘
});

}).catch(() => {
this.$message({
type: ‘info‘,
message: ‘已取消修改‘
});
});

},

headleDel(id){
this.$confirm(‘此操作将永久删除该文件, 是否继续?‘, ‘提示‘, {
confirmButtonText: ‘确定‘,
cancelButtonText: ‘取消‘,
type: ‘warning‘
}).then(() => {
this.$message({
type: ‘success‘,
message: ‘删除成功!‘
});
}).catch(() => {
this.$message({
type: ‘info‘,
message: ‘已取消删除‘
});
});
},
},
beforeMount() {
this.getDate();
}
}
</script>

<style scoped>

</style>

原文：https://www.cnblogs.com/jinzechuan/p/10644668.html