Vue的增删改查操作
这里只是利用Vue进行简单的增删改查操作，还没有与后台进行结合，只是定义了一些模拟数据，模拟了增删改查操作的过程。其中element-ui组件库经常与vue进行结合，使用时需要提前安装好element-ui组件库的环境，详情操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020
1.首先是先将对应的模板<template>写好，包括输入框(查找操作)，增加按钮(增加操作)，删除按钮(删除操作)，修改按钮(修改操作)，表格(显示数据)。
<template>
<div class="hello">
<h1>element-ui表格</h1>
<el-row class="table-grid-content">
<el-col :span="18" class="grid">
<el-input v-model="input" placeholder="请输入搜索内容"></el-input>
</el-col>
<el-col :span="3" class="grid" :gutter="1">
<el-button type="success" icon="el-icon-search">搜索</el-button>
</el-col>
<el-col :span="2" class="grid" :gutter="15">
<el-button type="primary" @click="addMembers()">增加</el-button>
</el-col>
</el-row>
<el-table :data="tables" :stripe="true" :border="true" width="100%">
<el-table-column label="日期" prop="date"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="modifyData(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" @click="deleteData(scope.$index,tableData)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="centerDialogVisible">
<el-form :model="editForm">
<el-form-item label="日期" :picker-options="pickerOptions">
<el-date-picker v-model="editForm.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
</el-form>
<div>
<el-button @click="closeDialog()">取消</el-button>
<el-button type="primary" @click="sumbitEditRow()">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="isAddMembers">
<el-form :model="addForm">
<el-form-item label="日期" :picker-options="pickerOptions">
<el-date-picker v-model="addForm.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="addForm.address"></el-input>
</el-form-item>
</el-form>
<div>
<el-button @click="closeDialog()">取消</el-button>
<el-button type="primary" @click="sumbitAddRow()">确定</el-button>
</div>
</el-dialog>
<el-input v-model="id" placeholder="请输入查询的ID号"></el-input>
</div>
</template>
2.制作好模板之后，就得编写一下各个方法‘，包括增加方法(addMembers,sumbitAddRow)，删除方法(deleteData)，查找方法(tables())，修改方法(modifyData,sumbitEditRow)。
1-1.增加操作：增加一个对象数据，即增加一行表格数据
addMembers() {
this.isAddMembers = true
this.addForm = {
name: '',
date: '',
address: ''
}
},
保存增加的数据到tableData对象数组，调用了数组的push()方法。
sumbitAddRow() {
this.tableData = this.tableData || []
console.log("表格是:" + this.tableData)
this.tableData.push({
name: this.addForm.name,
date: this.addForm.date,
address: this.addForm.address
})
this.isAddMembers = false;
console.log("新增的日期：" + this.addForm.date)
}
1-2.删除操作：删除一个对象数据，即删除表格的一行数据。
deleteData(index, row) {
this.tableData.splice(index, 1)
console.log("进行了删除操作")
console.log("index的值是：" + index)
console.log("row的值是：", row)
},
调用了数组的splice()方法，通过scope.$index锁定删除行的索引，保证所选行的数据可以被删除。
1-3.修改操作：修改一个对象数据，即对表格中某一行的数据进行修改。
modifyData(index, row) {
this.centerDialogVisible = true
this.editForm = Object.assign({}, row); //重置对象
_index = index;
console.log("index的值：" + index)
console.log("_index的值：" + _index)
console.log("row的值是：", this.editForm) //代表选择的这一行的数据
},
也是通过scope.$index锁定修改行的索引，保证所选行的数据可以被成功修改。
sumbitEditRow() {
var editData = _index;
console.log("editData的值" + this.editForm)
this.tableData[editData].name = this.editForm.name;
this.tableData[editData].date = this.editForm.date;
this.tableData[editData].address = this.editForm.address;
this.centerDialogVisible = false;
console.log("数据：" + this.editForm.date)
console.log("对象数组", this.tableData)
},
1-4.查找操作：查找一个对象数据，在输入框输入内容进行模糊查询。
computed: {
tables() {
const input = this.input
if (input) {
console.log("input输入的搜索内容：" + this.input)
return this.tableData.filter(data => {
console.log("object:" + Object.keys(data))
return Object.keys(data).some(key => {
return String(data[key]).toLowerCase().indexOf(input) > -1
})
})
}
return this.tableData
}
}
这里用到了ES6的filter箭头函数和some箭头函数对对象数组tableData进行过滤,将符合条件的数据调出来。
3.写好相关的操作方法之后，就可以通过npm run dev对项目进行编译运行，并且可以在浏览器中对增删改查操作进行测试。
增加操作效果图
- 增加一条关于
Mary对象数据：
删除操作效果图
将王小虎这一对象数据从表格中删除：
修改操作效果图
将Mary的地址改为广东省汕头市潮阳区金灶镇：
查找操作效果图
在输入框中输入王大虎进行数据查询：
附加：HelloWorld.vue增删改查的完整代码：
<template>
<div class="hello">
<h1>element-ui表格</h1>
<el-row class="table-grid-content">
<el-col :span="18" class="grid">
<el-input v-model="input" placeholder="请输入搜索内容"></el-input>
</el-col>
<el-col :span="3" class="grid" :gutter="1">
<el-button type="success" icon="el-icon-search">搜索</el-button>
</el-col>
<el-col :span="2" class="grid" :gutter="15">
<el-button type="primary" @click="addMembers()">增加</el-button>
</el-col>
</el-row>
<el-table :data="tables" :stripe="true" :border="true" width="100%">
<el-table-column label="日期" prop="date"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="modifyData(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" @click="deleteData(scope.$index,tableData)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="centerDialogVisible">
<el-form :model="editForm">
<el-form-item label="日期" :picker-options="pickerOptions">
<el-date-picker v-model="editForm.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
</el-form>
<div>
<el-button @click="closeDialog()">取消</el-button>
<el-button type="primary" @click="sumbitEditRow()">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="isAddMembers">
<el-form :model="addForm">
<el-form-item label="日期" :picker-options="pickerOptions">
<el-date-picker v-model="addForm.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="addForm.address"></el-input>
</el-form-item>
</el-form>
<div>
<el-button @click="closeDialog()">取消</el-button>
<el-button type="primary" @click="sumbitAddRow()">确定</el-button>
</div>
</el-dialog>
<el-input v-model="id" placeholder="请输入查询的ID号"></el-input>
</div>
</template>
<script>
// import { musicBroadcastingDetails } from '@/api/index.js'
import axios from 'axios'
var _index;
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
centerDialogVisible: false,
isAddMembers: false,
editForm: [],
addForm: [],
searchData: '',
input: '',
id:'',
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
tableData: [{
date: '2020-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2020-05-04',
name: '王大虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2020-05-01',
name: '王中虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2020-05-03',
name: '王全虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2020-05-04',
name: '王大虎',
address: '上海市普陀区金沙江路 1517 弄'
}
]
}
},
methods: {
deleteData(index, row) {
this.tableData.splice(index, 1)
console.log("进行了删除操作")
console.log("index的值是：" + index)
console.log("row的值是：", row)
},
modifyData(index, row) {
this.centerDialogVisible = true
this.editForm = Object.assign({}, row); //重置对象
_index = index;
console.log("index的值：" + index)
console.log("_index的值：" + _index)
console.log("row的值是：", this.editForm) //代表选择的这一行的数据
},
sumbitEditRow() {
var editData = _index;
console.log("editData的值" + this.editForm)
this.tableData[editData].name = this.editForm.name;
this.tableData[editData].date = this.editForm.date;
this.tableData[editData].address = this.editForm.address;
this.centerDialogVisible = false;
console.log("数据：" + this.editForm.date)
console.log("对象数组", this.tableData)
},
closeDialog() {
this.centerDialogVisible = false
this.isAddMembers = false
console.log("editfrom", this.editForm)
console.log("addfrom", this.addForm)
},
addMembers() {
this.isAddMembers = true
this.addForm = {
name: '',
date: '',
address: ''
}
},
sumbitAddRow() {
this.tableData = this.tableData || []
console.log("表格是:" + this.tableData)
this.tableData.push({
name: this.addForm.name,
date: this.addForm.date,
address: this.addForm.address
})
this.isAddMembers = false;
console.log("新增的日期：" + this.addForm.date)
}
},
computed: {
tables() {
const input = this.input
if (input) {
console.log("input输入的搜索内容：" + this.input)
return this.tableData.filter(data => {
console.log("object:" + Object.keys(data))
return Object.keys(data).some(key => {
return String(data[key]).toLowerCase().indexOf(input) > -1
})
})
}
return this.tableData
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-grid-content {
border-radius: 4px;
height: 50 px;
background: #ebeef5;
padding: 10px;
}
</style>
版权声明：本文为weixin_43913219原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。