前言
续写 【在家办公日常1】 https://blog.csdn.net/qq_20399063/article/details/104198603
写文章目的：把日常开发内容分享给大家看，希望你们看了会有所收获
【在家办公日常1】中写从 原型--设计数据库--开发接口--写接口文档
这篇写的是使用vue开发前端，本来这个vue前端工作是由前端人员做的，但是我们公司的前端都离职了
我在他们离职前，自己学习了一段时间，并且实际开发过一段时间，后面的项目前端工作也要我做了 T_T
一般情况：在【在家办公日常1】中写完接口文档，后端人员的工作就算完成了，等待前端人员对接接口，反馈接口的问题，后端人员再修改接口。
我的情况： 我自己负责前端代码，接口文档的注释可以不用写，或者不写接口文档（因为字段能记得住，记不住看一下数据库注释就可以），我们经常调侃：后端5分钟，前端2小时。^_^
前端开发分析（前端代码量 超多）
基于【在家办公日常1】原型，一个列表，增删改查，复制一下平常开发的模块，字段修改一下就可以了。
使用工具：VsCode，Element框架
难点1： 一对多关系数据添加，如下图
后端接口：把一对多的数据全部提交上来，一起保存。而不是，一对多的数据修改一条保存一条
代码截图（没有完整，不需要去实践，能看得懂就好）：
题目列表：数据与一个List绑定，用push,splice方法， 实现添加、修改、删除List中的数据
知识点：push,splice 方法使用
<el-table class="" :data="formData.examQuestionClassList" size="mini" border>
<el-table-column align="center" prop="questionClassId" label="考题类别"></el-table-column>
<el-table-column align="center" prop="score" label="总分"></el-table-column>
<el-table-column align="center" prop="questionNum" label="题数"></el-table-column>
<el-table-column align="center" prop="questionType" label="题型">
<template slot-scope="scope">
{{scope.row.questionType | getLocBaseData('QUESTION_TYPE')}}
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button @click.native="show_questionClass(scope.row,scope.$index)" type="text">编辑</el-button>
<el-button style="color:#ff0000" @click.native="delquestionClass(scope.$index)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
核心 绿色的【添加】：
1、填写表单数据
2、点击【确认】方法:surequesionClass
surequestionClass() {
this.$refs['questionClass_rules'].validate((valid) => {
if (valid) {
if (this.isquestionClassAdd) {
//新增
this.formData.examQuestionClassList.push(this.questionClassItem)
} else {
//编辑
this.formData.examQuestionClassList.splice(this.questionClassIndex, 1, this.questionClassItem)
}
this.questionClass_show = false
} else {
console.log('error submit!!');
return false;
}
})
},难点2： 自定义组件数据 带回
1、点击【考卷分类】
2、选择树型数据，点【确定】，把id和name带回到上一个 窗口
知识点： vue自定义组件，组件传值，
this.$nextTick ： 解决数据Dom更新不生效问题， 详情的功能场景，自行百度
this.$emit ： 子组件绑定一个事件，让父组件的方法处理业务。
场景：子组件选择完提交数据后，父组件获取到数据，把数据显示在上一层窗口中。
自定义组件代码：（不好意思，我直接粘代码了，下面代码是可以通用的，你们在开发中有使用到这类组件，可以直接copy，实践一下）
<!-- 考卷类型 树型-->
<template>
<div>
<el-dialog :close-on-click-modal="false" v-if="setMenuShow" :title="title" :visible.sync="setMenuShow" width="800px">
<div style="height:300px;overflow:auto" >
<el-tree
@node-click="handelNodeClick"
:expand-on-click-node="false"
:data="MenuData"
default-expand-all
:node-key="nodeKey"
ref="tree" highlight-current :props="defaultProps">
</el-tree>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="setMenuShow = false">关 闭</el-button>
<el-button type="primary" :disabled="!checkData" @click="handelSetMenu" >确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name:'ExamClassTree',
props: {
defaultCheck:{
default:''
},
title: {
default:''
},
nodeKey: {
default:'id'
},
show:{
},
MenuData:{},
defaultProps:{
default(){
return {
children: 'children',
label: 'name'
}
}
}
},
mounted(){
this.init()
},
data () {
return {
setMenuShow:this.show,
checkData:''
}
},
methods:{
//初始化方法
init(){
this.$nextTick(()=>{
this.$refs.tree.setCurrentKey(this.defaultCheck)
})
},
//处理节点点击事件
handelNodeClick(data){
this.checkData = this._dep(data)
},
handelSetMenu(){
this.setMenuShow = false
this.$emit('handelSelectItem',this.checkData)
},
},
watch:{
setMenuShow(v){
this.$emit('update:show',v)
},
show(v){
this.setMenuShow = v
}
}
}
</script>
<style lang='scss' scoped>
</style>