1-3.vue+element-ui实现简单的增加操作

Vue增加表格数据

这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020
1.首先在<template>标签中写好增加数据的模板。这里用到了element-ui组件库中的Dialog对话框组件，From表单组件以及Button按钮组件。

<template>
	<div class="hello">
		<h1>element-ui表格</h1>
		<el-row :span="24">
			<el-col class="table-grid-content">
				<el-button type="primary" @click="addMembers()">增加</el-button>
			</el-col>
		</el-row>
		<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>
	</div>
</template>

注明：

• visible：是否显示Dialog对话框，支持sync修饰符，是Boolean类型数据，默认值是false(不显示)
• model：表单绑定的数据对象
• label：表单项的标签文本
• v-model：用于绑定输入框的数据
• picker-options：绑定了一个日期选择器
• format：显示在输入框中的日期格式，默认是yyyy-MM-dd
• value-format：设置绑定值的日期格式，默认是Date类型

<el-input>输入框利用v-model实现数据的双向绑定。addForm对象数组初始化为空,用来存放输入框的数据，主要的代码是：

<el-button type="primary" @click="sumbitAddRow()">确定</el-button>
<el-input v-model="addForm.name"></el-input>
<el-input v-model="addForm.date"></el-input>
<el-input v-model="addForm.address"></el-input>

2.模板的样式：

<style scoped>
	.table-grid-content {
		border-radius: 4px;
		height: 50 px;
		background: #ebeef5;
		padding: 10px;
	}
</style>

3.现在写一下增加数据的addMembers方法。若用户点击增加按钮，将会弹出一个增加数据的对话框。是否显示对话框是通过isAddMembers参数进行设置的，初始值为false。

addMembers() {
	this.isAddMembers = true
	this.addForm = {
		name: '',
		date: '',
		address: ''
}

• 这里定义了addForm对象的属性，初始值都为空。

调用addMembers方法进行增加数据操作的代码：

<el-row :span="24">
    <el-col class="table-grid-content">
	<el-button type="primary" @click="addMembers()">增加</el-button>
	</el-col>
</el-row>

4.当填写好要增加的数据，点击对话框的确定按钮保存数据，需要调用sumbitAddRow()方法进行数据的更新。

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)
}

注明：sumbitAddRow()方法中将新增的数据更新到原先的tableData对象数组。这里用的是push() 方法，将新增的数据插入tableData对象数组中。
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
5.假设我想要增加一条关于Mary成员的数据，点击“增加”按钮，编辑好想要增加的数据。完成增加操作之后，可以看见表格中新增了一条关于Mary成员的数据。


至此就完成了新增表格数据的功能。
附加：
HelloWorld.vue文件的完整代码：

<template>
	<div class="hello">
		<h1>element-ui表格</h1>
		<el-row :span="24">
			<el-col class="table-grid-content">
				<el-button type="primary" @click="addMembers()">增加</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" :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>
	</div>
</template>

<script>
  //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: [],
				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 弄'
					}

				]
			}
		},
		/*	mounted() {
				this.getUsers()
			},*/
		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)
			}

		}
	}
</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>

来源：CSDN

作者：落叶~

链接：https://blog.csdn.net/weixin_43913219/article/details/104364450