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