B066-基础环境-前后端整合批量删除下拉级联增改-Toy模板网

这篇具有很好参考价值的文章主要介绍了B066-基础环境-前后端整合批量删除下拉级联增改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

见文档与代码

cd 子项目
运行前端项目

页面布局分析
B066-基础环境-前后端整合批量删除下拉级联增改,笔记总结,java,es6

批量删除

点击多选 - 改变data - 点击批量删除 - 带参数发请求
B066-基础环境-前后端整合批量删除下拉级联增改,笔记总结,java,es6

页面调整

略

普通属性的新增和修改

新增按钮：点击新增 - 弹出框体 - 清空数据 - 填写数据绑定到data - 提交表单 - 带数据发请求
修改按钮：点击编辑 - 打开框体 - 克隆当前行数据 - 改变数据 - 发送请求
B066-基础环境-前后端整合批量删除下拉级联增改,笔记总结,java,es6

引用属性的新增和修改

管理员下拉列表

前端下拉列表 - data层 - 后端基于employee的查询所有

不要点击的时候才加载，进来页面的时候就加载，放在钩子函数里

		methods: {
			getEmployees(){
				this.$http.get("/employee")
						.then(result=>{
							result = result.data;//List<Employee>
							if(result){
								this.employees = result;
							}
						})
			}
		mounted() {
            this.getDepartments();
            //页面加载完成后请求后端，获取管理员列表
            this.getEmployees();
        }

B066-基础环境-前后端整合批量删除下拉级联增改,笔记总结,java,es6

<!--
:key= 选中ID
:label= 选中后，窗体中显示的值
:value 最终绑定给model层的数据（注意：如果value要绑定对象，那么必须加上：value-key="id"）
-->
<el-select v-model="departmentForm.manager" placeholder="请选择">
	<el-option
			v-for="item in employees"
			:key="item.id"
			:label="item.username"
			:value="item">
		<span style="float: left">{{ item.username }}</span>
		<span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
	</el-option>
</el-select>