代码:
序号:
姓名:
>
地址:
>
@click="add()"
type="primary"
>添加
>
v-model="input"
placeholder="请输入内容"
>
>查询
>
@click="handleDelete(scope.row, scope.$index)"
type="danger"
>删除
>
>编辑
title="编辑"
v-model="editFormVisible"
:close-on-click-modal="false"
>
取消
提交
export default {
data() {
return {
tableData: [
{
id: "1",
name: "李明明",
address: "海淀区信息路",
},
{
id: "2",
name: "张红",
address: "朝阳区",
},
{
id: "3",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "4",
name: "王二虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "5",
name: "王大虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "6",
name: "王三虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
input: "",
arr: [],
id: "",
name: "",
address: "",
editFormVisible: false,
editForm: {
id: "",
name: "",
address: "",
},
data: {},
};
},
created() {
//拷贝
this.all = JSON.parse(JSON.stringify(this.tableData));
},
methods: {
// 查询过滤
search() {
this.tableData = this.tableData.filter(
(v) =>
v.id === this.input ||
v.name === this.input ||
v.address === this.input
);
if (this.input == "") {
this.tableData = this.all;
}
},
//添加
add() {
this.tableData.push({
id: this.id,
name: this.name,
address: this.address,
});
(this.id = ""), (this.name = ""), (this.address = "");
},
//删除
handleDelete(scope, index) {
this.search();
this.tableData.splice(index, 1);
},
//修改
handleEdit(index, row) {
this.editFormVisible = true;
this.editForm = this.tableData[row];
console.log(this.editForm);
},
//提交
editSubmit() {
this.editFormVisible = false;
console.log(this.editForm);
},
},
};
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)