ElementUI开发实例

				<el-form-item label="性别">
					<el-select v-model="searchFormModel.sex" placeholder="请选择性别">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="success" icon="el-icon-search" @click="searchUser">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<el-col :span="8">
			<el-button type="primary" icon="el-icon-search" @click="openInsertDialog">用户添加</el-button>
			<el-button type="danger" icon="el-icon-search" @click="deleteUser">批量删除</el-button>
		</el-col>
	</el-row>
	<el-table :data="tableData" @selection-change="handleSelectionChange">

		<!--全选配置-->
		<el-table-column type="selection"></el-table-column>

		<el-table-column label="序号" prop="id"></el-table-column>
		<!--用户头像-->
		<el-table-column label="头像">
			<template slot-scope="scope">
				<el-avatar :src="scope.row.userface"></el-avatar>
				<!-- <img :src="scope.row.userface"  width="60px" height="60px"/>-->
			</template>
		</el-table-column>
		<!--登录名称-->
		<el-table-column label="登录名" prop="username"></el-table-column>
		<!--性别-->
		<el-table-column label="性别">
			<template slot-scope="scope">
				<span v-if="scope.row.sex==1">男</span>
				<span v-if="scope.row.sex==0">女</span>
			</template>
		</el-table-column>
		<!--电话号码-->
		<el-table-column label="手机号">
			<template slot-scope="scope">
				<i class="el-icon-phone"></i>
				<span style="margin-left: 10px;">{{scope.row.phone}}</span>
			</template>
		</el-table-column>

		<!--角色-->
		<el-table-column label="拥有角色" prop="nameZhs"></el-table-column>

		<!--省-->
		<el-table-column label="省市区" width="150">
			<!--作用域-->
			<template slot-scope="scope">
				{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.districtName}}
			</template>
		</el-table-column>
		<!--市
		<el-table-column label="市" prop="cityName"></el-table-column>
		-->
		<!--区
		<el-table-column label="区" prop="districtName"></el-table-column>
		-->

		<el-table-column label="操作" width="300">
			<template slot-scope="scope">
				<el-button type="warning" @click="openRoleDialog(scope.row)" size="small">授权</el-button>
				<el-button type="success" size="small" @click="openEditDialog(scope.row)">修改</el-button>
				<el-button type="primary" size="small">详情</el-button>
				<el-button type="danger" size="small">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-row>
		<el-col :span="24">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :total="total"
			 :page-size="size" :page-sizes="sizes" :current-page="current" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		</el-col>
	</el-row>



	<!--添加用户的对话框开始-->
	<el-dialog :visible.sync="insertUserDialog" title="添加用户" width="60%" center>

		<el-form :model="insertFormModel" :rules="insertRules" ref="insertRuleForm" label-width="80px">

			<el-form-item label="登录名称" prop="username">
				<el-input v-model="insertFormModel.username" placeholder="请输入登录名称"></el-input>
			</el-form-item>

			<el-form-item label="手机号" prop="phone">
				<el-input v-model="insertFormModel.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>

			<el-form-item label="性别">
				<!--label就是value值-->
				<el-radio v-model="insertFormModel.sex" label="1" border>男</el-radio>
				<el-radio v-model="insertFormModel.sex" label="0" border>女</el-radio>
			</el-form-item>

			<el-form-item label="省市区">
				<el-cascader v-model="value" :options="nations" :props="props" @change="handleChange"></el-cascader>
			</el-form-item>

			<el-form-item label="头像">
				<!--action 上传的地址  name的名称默认是file 就是上传到控制层的参数名称-->
				<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
				<el-upload name="file" :show-file-list="false" class="avatar-uploader" action="http://localhost:92/upload"
				 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<!--img 是用来显示上传图片的本地效果-->
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="saveUser('insertRuleForm')">保存</el-button>
				<el-button type="success">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
	<!--添加用户的对话框结束-->


	<!--//授权对话框开始//-->
	<el-dialog :visible.sync="roleDialog" title="授权角色" width="60%" center>
		<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
			<!--遍历角色{{role.nameZh}}名称    ：label是value值-->
			<el-checkbox v-for="role in roles" :label="role.id">{{role.nameZh}}</el-checkbox>
		</el-checkbox-group>

		<span slot="footer" class="dialog-footer">
			<el-button @click="roleDialog= false">取 消</el-button>
			<el-button type="primary" @click="saveRole">授 权</el-button>
		</span>

	</el-dialog>

	<!--//授权对话框结束//-->








	<!--编辑用户的对话框开始-->
	<el-dialog :visible.sync="editUserDialog" title="编辑用户" width="60%" center>

		<el-form :model="editFormModel" ref="editRuleForm" label-width="80px">

			<el-form-item label="登录名称" prop="username">
				<el-input v-model="editFormModel.username" placeholder="请输入登录名称"></el-input>
			</el-form-item>

			<el-form-item label="手机号" prop="phone">
				<el-input v-model="editFormModel.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>

			<el-form-item label="性别">
				<!--label就是value值-->
				<el-radio v-model="editFormModel.sex" label="1" border>男</el-radio>
				<el-radio v-model="editFormModel.sex" label="0" border>女</el-radio>
			</el-form-item>

			<el-form-item label="省市区">
				<el-cascader v-model="value" :options="nations" :props="props" @change="handleChange"></el-cascader>
			</el-form-item>

			<el-form-item label="头像">
				<!--action 上传的地址  name的名称默认是file 就是上传到控制层的参数名称-->
				<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
				<el-upload name="file" :show-file-list="false" class="avatar-uploader" action="http://localhost:92/upload"
				 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<!--img 是用来显示上传图片的本地效果-->
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="editUser('editRuleForm')">修改</el-button>
				<el-button type="success">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
	<!--编辑用户的对话框结束-->

</div>