Vue，element-UI实现功能需要的技术点（重点form，table）

最近在用Vue，elementUI框架学到了一些东西，在这里进行一些系统的整理

<el-form :inline="true" :model="dataForm" class="demo-form-inline" size="small">
		<el-form-item label="任务名称:" prop="taskId">
			<el-select v-model="dataForm.taskId" filterable style="width: 100%;" :clearable="true" placeholder="请选择">
					<el-option v-for="p in ProductionPlanList" :label="p.code" :value="p.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="检查单位:" prop="regulatoryUnitId">
			<el-select v-model="dataForm.regulatoryUnitId" filterable style="width: 100%;" :clearable="true" placeholder="请选择">
					<el-option v-for="p in SysDeptList" :label="p.name" :value="p.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="作业单位:" prop="operateUnitId">
			<el-select v-model="dataForm.operateUnitId" filterable style="width: 100%;" :clearable="true" placeholder="请选择">
				<el-option v-for="p in ConstructionUnitList" :label="p.name" :value="p.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="起点桩号:" prop="pileStart">
				<el-input v-model="dataForm.pileStart" placeholder="起点桩号"></el-input>
		</el-form-item>
		<el-form-item label="终点桩号:" prop="pileEnd">
				<el-input v-model="dataForm.pileEnd" placeholder="终点桩号"></el-input>
		</el-form-item>
		<el-form-item>
				<el-button type="primary" @click="getDataList('init')">查询</el-button>
		</el-form-item>
		</el-form>
		<el-form-item>
				<div style="float:right;">
						<el-button type="primary" @click="addOrUpdateHandle()" size="small">新建</el-button>
						<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0" size="small">删除</el-button>
						<el-button type="primary" @click="exportHandle()" size="small">导出</el-button>
				</div>
		</el-form-item>

在这里主要是分为两个部分，第一个部分就是一个表单目的就是为了实现一个表单，其实主要的功能是为了实现一个查询多条件查询，第二个部分就是实现一个删除功能，添加功能，导出功能。

• :model="dataForm"需要注意的是这里绑定了一个form表单
• 在这里需要注意的是一些小问题，就是你做的项目不再是自己的制作demo而是大家将来会使用的因为不同的人的电脑比例不同分辨率不同所以说你在设置style的时候要多注意一点style="width: 100%;"在设定上这个属性以后你的不管是输入日期的还是input还是下拉菜单都是一样的宽度了。
• v-for="p in ProductionPlanList" :label="p.code" :value="p.id"将v-for放在option标签之中就会根据数据去新建相同数量的option，然后再展示的时候展示的是你的数据的label，而再提交的时候提交的是你的value。

<el-tabs type="border-card">
				<el-tab-pane>
					<span slot="label">
						待下发
						<el-badge style="margin-left: 10px;"  />
					</span>
					<el-table v-loading="dataListLoading" :data="testList0" border @selection-change="selectionChangeHandle" style="width: 100%;">
								<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>

在这里使用了一个el-tabs的组件为的是实现

这样的效果，为的就是实现一个table中显示多个table并且还是带有标签的，将你的不同的table放在不同的<el-tab-pane>中，添加el-table
下面开始介绍一些table的功能

• v-loading="dataListLoading"主要的实现的效果就是为了再加载的时候实现的，我并没有使用很多。
• :data="testList0"这个是主要是将后段传到前端的集合显示绑定在指定table上面。
• 而这个testList0是在data()里面的return里面，是一个空的数组
• @selection-change="selectionChangeHandle"这个是主要为了实现一个选择窗口

selectionChangeHandle(val) {
				this.dataListSelections = val
			},

这个方法就是为了实现一个将在table中的选定的值放在dataListSelections里面。

<el-table-column prop="code" label="任务名称" header-align="center" align="center"></el-table-column>

在这里呢需要去实现一个显示的功能，prop="code"通过这个实现的，这个就是我们之所以能够显示的数据，我们从后端传到前台的testList0里面，传进来一个map，然后键就是使用的code，值得话就是使用的code所对应的值。

• type="selection"这个就是显示选择框。

<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template slot-scope="scope">
								<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
								<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
					</template>
</el-table-column>

在这里需要注意的是scope.row.id这个就是这一条数据中id的属性将其在使用方法的时候带到js方法里面

<el-pagination 
					:current-page="page1" 
					:page-sizes="[10, 20, 50, 100]" 
					:page-size="limit1" 
					:total="total1" 
					layout="total, sizes, prev, pager, next, jumper"
					 @size-change="pageSizeChangeHandle" 
					 @current-change="pageCurrentChangeHandle1"></el-pagination>

这个是用来实现分页功能的组件

• :current-page="page1"这个是表明当前页
• :page-sizes="[10, 20, 50, 100]"这个是来显示一页中页数
• :page-size="limit1"这个是用来显示页数
• :total="total1"是用来显示页数的
• layout="total, sizes, prev, pager, next, jumper"组件中已经已经写好的功能包括前进后退跳转
• @size-change="pageSizeChangeHandle"是用来实现换页的功能更换一页中会有多少行的数据
• @current-change="pageCurrentChangeHandle1"实现第一页到第多少页的转换

pageCurrentChangeHandle1(e) {
				this.page1=e;
				this.getDataList0();
			},
pageSizeChangeHandle(e) {
				this.limit1=e;
				this.getDataList0();
			},

这是上面的两个具体的方法一个是实现更换页数，一个是实现更换页的大小，而this.getDataList0();指的就是查询拿到table绑定的值得方法，也就是说我们每一次更改分页的大小更改分页的页数都是进行一个查询操作。