Dharma 61 号会员
    •  0 回帖  •  905 浏览  •  3 年前
   

UniMaxV5 系列开发培训 - 多表开发

1、背景

本期视频讲解的是怎么去多表开发。以学生成绩表为例，其中学生成绩表字段为姓名（name）、语文（chinese），数学（math），英语（english）三门成绩。还有一个额外显示值性别（sex）。其中姓名为查找带回，性别为下拉框，并对下拉框做禁止选中操作，只能通过查找带回给性别赋值。其余为文本框。

2、开发流程

2-1、首先在目录下创建自己的 vue 文件（看上期单表视频讲解）.
2-2、在菜单定义里面去添加次页面，url 路径就是你创建文件的路径 (看上期单表视频讲解)。
2-3、角色管理添加权限

注意：你刷新页面你新添加的菜单也不会出来，现在前端对菜单做了缓存，所以你先要去把缓存清理掉，才能去做刷新操作。

image-20200917103640870.png

2-4、开始开发 studentScore.vue 页面

样式模板：对于单表的在这里做下修改，一个下只能有一个

标签，所以尽量是加上 

<template>  
 <div id="studentScore">  
 <eh-layout>  
 <div slot="center">  
   
 </div>  
 </eh-layout>  
 </div>  
</template>  
<script>  
import qs from "qs";  
export default {  
 name: "studentScore", //与页面名保持一致  
    
 data() {  
   
 return {  
    
 };  
 },  
 created() {  
   
 },  
 mounted() {},  
 methods: {  
 // 方法名称  展示样例， 在<template>里面定义的方法在methods里面必须有，但在methods里面的有的不一定要在<template>里面写  
 getMenthod(){},  
    
 },  
};  
</script>  
<style lang="scss" scoped>  
​  
</style>

Eh-Grid 多表开发：

多表的 Eh-Grid 开发与 Eh-Grid 单表开发基本没有什么区别，主要区别体现在grid属性上。

注意：在你外键的地方添加两个属性 refEntity(外键实体名) 和 refName(外键实体字段名)，请看下面示例。

<script>  
import qs from "qs";  
import { getFormDataByObject } from "@/util/index.js";  
import studentScoreForm  from "./studentScoreForm";  
​  
 const gridOptions = {  
 grid: {  
 title: "学生成绩信息",  
 description: "这里可以填写一些学生成绩信息的描述",  
 stripe: true,  
 border: true,  
 selectMax: 1,// 单选  
 columns: [  
 {  
 prop: "id",  
 label: "id",  
 visible: false,  
 width : "120px",  
 },  
 {  
 label: "姓名",  
 prop: "name",  
 width : "120px",  
 refEntity : "Student",  
 refName : "name",  
 sortable: true  
 },  
 ],  
 defaultSort: {  
 prop: "name",  
 order: "ascending"  
 },  
 pagination: {  
 pageSize: 10,  
 },  
 },  
​  
 };  
};  
</script>

全部代码示例：

<template>  
 <div id="studentScore">  
 <eh-layout>  
 <div slot="center">  
 <eh-tabs :tabs.sync="tabs" ref="myTabs" v-model="tabsName" @after-close="close">  
 <template slot="studentScore-select">  
 <eh-layout>  
 <div slot="center">  
 <eh-grid  
 :grid="gridOptions.grid"  
 id="studentScore"  
 ref="studentScore"  
 :dataSource="gridOptions.dataSource"  
 :options="gridOptions.options"  
 @selection-change="handleSelectionChange"  
 >  
 <template slot="toolbar">  
   
 <el-button class="changeButton" @click="addOrEdit('add')">新增</el-button>  
 <el-button class="changeButton" @click="addOrEdit('edit')">修改</el-button>  
 <el-button class="changeButton" @click="del(rwoData)">删除</el-button>   
 <!-- <el-button class="changeButton" @click="exportExcel">导出</el-button>  -->  
 </template>  
 </eh-grid>  
 </div>  
 </eh-layout>  
 </template>  
 <!-- 新增/修改 -->  
 <studentScoreForm slot="studentScore-add" :param="otherParam" @tabmoved="remove"</studentScoreForm>  
 <studentScoreForm slot="studentScore-edit":param="otherParam" @tabmoved="remove"</studentScoreForm>  
 </eh-tabs>  
 </div>  
 </eh-layout>  
 </div>  
</template>  
<script>  
import qs from "qs";  
import { getFormDataByObject } from "@/util/index.js";  
import studentScoreForm  from "./studentScoreForm";  
​  
const gridOptions = {  
 dataSource: {  
 bean: "StudentScoreController",  
 method: "select",  
 entity: "com.epichust.entity.StudentScore",  
 filters: [  
 {  
 field: "name",  
 compare: "eq,cn",  
 data: "",  
 type: "text",  
 },  
 ],  
 },  
 grid: {  
 // sortButton: true,  
 title: "学生成绩信息",  
 description: "这里可以填写一些学生成绩信息的描述",  
 stripe: true,  
 border: true,  
 selectMax: 1,// 单选  
 columns: [  
 {  
 prop: "id",  
 label: "id",  
 visible: false,  
 width : "120px",  
 },  
 {  
 label: "姓名",  
 prop: "name",  
 width : "120px",  
 refEntity : "Student",  
 refName : "name",  
 sortable: true  
 },  
 {  
 prop: "chinese",  
 label: "语文",  
 width: "120px",  
 sortable : true  
 },  
 {  
 label: "数学",  
 prop: "math",  
 width : "120px",  
 sortable : true  
 },  
 {  
 prop: "english",  
 label: "英语",  
 width: "200px",  
 sortable : true  
 },  
 {  
 prop: "createId",  
 label: "创建人",  
 width: "200px",  
 sortable : true  
 },  
 {  
 prop: "createDate",  
 label: "创建时间",  
 width: "200px",  
 sortable : true  
 },  
 ],  
 defaultSort: {  
 prop: "name",  
 order: "ascending"  
 },  
 pagination: {  
 pageSize: 10,  
 },  
 },  
 options: {  
 // 是否显示编辑过滤  
 // showFilterTemplate: false,  
 // usetotal: false,//带总量查询  
 extraParamFields: {  
 // consition: '8a5aya54a5t4t43453thf4'  
 },  
 },  
};  
export default {  
 name: "studentScore",  
 components: { studentScoreForm },  
 data() {  
   
 return {  
 tabsName : "studentScore-select",  
 gridOptions: gridOptions,  
 rwoData: [],  
 tabs: [  
 { name: "studentScore-select", title: "学生成绩信息" },  
 ],  
 otherParam : {},  
 };  
 },  
 created() {  
   
 },  
 mounted() {},  
 methods: {  
 //选择某一行数据  
 handleSelectionChange(val) {  
 console.info(val)  
 this.rwoData = val;  
 console.info(this.$refs.studentScore.data)  
 //   this.gridOptions.dataSource  
 },  
​  
 //  关闭 tabs标签  
 close(name){  
 //   this.refresh()  
 console.info(name)  
 },  
 remove(name){  
 if(name == this.tabsName){  
 this.$refs.myTabs.removeTab(name)  
 this.tabsName = 'studentScore-select'  
 }  
 },  
 //刷新表格  
 refresh() {  
 this.$refs.studentScore.bindGrid();  
 this.$refs.studentScore.clearSelection()  
 },  
   
 // 跳转新增修改  
 addOrEdit(val) {  
 // let data;  
   
 if (val == "add") {  
 this.otherParam = {}  
 this.tabs.push({ name: "studentScore-add", title: "新增" });  
   
 }else{  
 if(this.rwoData.length != 1){  
 this.$message({  
 message: "请选择一行数据进行修改！",  
 type: "error",  
 });  
 return false;  
 }  
 this.otherParam = this.rwoData[0]  
 this.tabs.push({ name: "studentScore-edit", title: "修改" });  
 }   
   
 },  
   
 },  
};  
</script>  
<style lang="scss" scoped>  
​  
</style>  
​

效果图：

image-20200917112142855.png

2-5、开始开发 studentScoreForm.vue 页面

特别提示（这里统一以标签页的样式展示）：

  • 对于表单项小于等于 6 个的，请使用弹框形式！！！

  • 大于 6 个使用标签页，也就是本示例的样子。

  • 按钮要给样式 class=“item-button”

  • 对于表单项如果超出屏幕不能装下的情况，请使用收缩框

    //1、没有边框  
<el-collapse v-model="activeNames" class="collapse-form-noborder">  
 <el-collapse-item title="查询数据修改" name="1">  
 </el-collapse-item>  
</el-collapse>  
​  
//2、有边框  
<el-collapse v-model="activeNames" class="collapse-from">  
 <el-collapse-item title="查询数据修改" name="1">  
 </el-collapse-item>  
</el-collapse>  
​
  • 如果可以装满，请使用image.png

多页面开发和单表开发在 form 表单上并没有体现明显差异，都是一个拿值传值过程，本页面整体是个 form 表单，这里主要重点讲解下平台的两个组件的使用：查找带回和下拉框（可以用来级联）。

  • 学生成绩的查找带回封装已经写在下面 StudentScoreSearchBack 中

  • 下拉框的使用：

    • v-model=“formData.sex”： 双向绑定的选择框的实际值。

    • keyName=“value” ： 定义选项的展示值

    • valueName=“key” ： 定义选项的实际值

    • selectRequest=“request” ：String：当是字符串类型时，当作为一个请求地址。Object：当是对象时，是一个更为详细的配置选项。

    <eh-select   
 v-model="formData.sex"   
 keyName="value"   
 valueName="key"  
 :selectRequest="request" >  
</eh-select>  
<script>  
​  
export default {  

 data() {  
 let self = this;  

 return {  
 //1、对象的时候  
 request : {  
 bean: "studentScoreController",    // 后台请求控制器  
 method: "getSex",  // 后台请求方法名  
 },  
 //2、字符串时  
 request : "studentScoreController!getSex.m"  
 }  
 }  

</script>  
​

    • relatedSelect：联动选择框的的选项数据（与relatedRequest配合使用）。一般初始值为空数组，在当前选择框的值改变时 动态加载赋值。

    • relatedRequest ：联动选择框选项请求的配置属性。

    <!-- 初始选择框 -->  
<eh-select keyName="label" valueName="value" selectRequest="bppComboxController!createOperationHeadCombox.m" :relatedRequest="relatedRequest" :relatedSelect.sync="relatedSelect"></eh-select>  
<!-- 联动选择框，把联动属性当作输入选项的数据 -->  
<eh-select keyName="label" valueName="value" :selectOptions="relatedSelect" ></eh-select>  
...  
<script>  
export default {  
 data(){  
 return {  
 relatedSelect: [],   
 relatedRequest:{  
 request: "bppComboxController!createOperationHeadCombox.m",  
 paramName: "routeGid",   // 此属性是查询参数名。 通过上一级选择框的值，作为参数查询下一级的选项  
 bean: "",    // 后台请求控制器  
 method: "",  // 后台请求方法名  
 formData: null, // object 若有formdata参数  
 },  
 }  
 }  
}  
</<script>

    注意：

    • 对于级联 relatedSelect（Array sync）：一般为一个空数组，并且要与 relatedRequest 一起使用，而且还要在级联的下拉框中定义一个 selectOptions 属性，与刚刚 relatedSelect 定义的值对应

    • 级联中的 relatedRequest 属性中传递参数有两种形式，一种通过 formData, 另一种 paramName（上级下拉框选中的值）

    代码展示 ：

    <template>  
 <el-form  
 :model="formData"  
 :rules="formDataRules"  
 ref="formDataForm"  
 class="form-container form-inline"  
 label-position="top"  
 :inline="true"  
 >  
 <div class="item-button">  
 <el-button class="changeButton" v-throttle @click="save('formDataForm')">保存</el-button>  
 <el-button class="changeButton" @click="resetForm('formDataForm')">重置</el-button>  
 </div>  
 <el-card class="card-shadow">  
 <el-form-item prop="mode" label="mode" hidden>  
 <el-input v-model="formData.mode"></el-input>  
 </el-form-item>  
 <el-form-item prop="id" label="id" hidden>  
 <el-input v-model="formData.id"></el-input>  
 </el-form-item>  
 <el-form-item prop="createId" label="创建人" hidden>  
 <el-input v-model="formData.createId"></el-input>  
 </el-form-item>  
 <el-form-item prop="createDate" label="创建时间" hidden>  
 <el-input v-model="formData.createDate"></el-input>  
 </el-form-item>  
 <el-form-item prop="isActive" label="是否激活" hidden>  
 <el-input v-model="formData.isActive"></el-input>  
 </el-form-item>  
 <el-form-item prop="isDelete" label="是否删除" hidden>  
 <el-input v-model="formData.isDelete"></el-input>  
 </el-form-item>  

 <el-form-item prop="name" label="姓名" class="is-required">  
 <!-- <el-input v-model="formData.name"></el-input> -->  
 <studentSearchBack   
 v-model="formData.name"  
 searchField="id"  
 labelField="name"  
 :defaultLabel="defaultLabel"  
 @selectedRows="selectStudent"  
 :params="stuParam"  
 >  
 </studentSearchBack>  
 </el-form-item>  
 <el-form-item prop="sex" label="性别" class="is-required">  
 <!-- <el-input v-model="formData.sex"></el-input> -->  
 <!-- <el-select v-model="formData.sex" disabled placeholder="--请选择--">  
 <el-option  
 v-for="item in sexList"  
 :key="item.key"  
 :label="item.value"  
 :value="item.key"  
 ></el-option>  
 </el-select> -->  
 <eh-select   
 v-model="formData.sex"   
 keyName="value"   
 valueName="key"  
 :selectRequest="request" >  
 </eh-select>  
 </el-form-item>  
 <el-form-item prop="chinese" label="语文" >  
 <el-input v-model="formData.chinese"></el-input>  
 </el-form-item>  
 <el-form-item prop="math" label="数学" >  
 <el-input v-model="formData.math"></el-input>  
 </el-form-item>  
 <el-form-item prop="english" label="英语">  
 <el-input  v-model="formData.english"></el-input>  
 </el-form-item>  
 </el-card>  
 </el-form>  
</template>  
<script>  
import qs from "qs";  
import { formatTree } from "@/util/index.js";  
import studentSearchBack from "@/views/searchBackTemplate/studentSearchBack"  
export default {  
 name: "studentScoreForm",  
 components: { studentSearchBack },  
 props: ["param"],  
 data() {  
 let self = this;  

 return {  
 formDefaultData: {  
 id: "",  
 createId: "",  
 createDate: "",  
 isActive: "0",  
 isDelete: "0",  
 name: "",  
 sex : "",  
 chinese : "",  
 math : "",  
 english: "",  
 },  
 //form 表单  
 formData: {  
 id: "",  
 createId: "",  
 createDate: "",  
 isActive: "0",  
 isDelete: "0",  
 name: "",  
 sex : "",  
 chinese : "",  
 math : "",  
 english: "",  
 },  
 formDataRules: {  
 name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],  
 sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],  
 },  
 sexList: [{key : '0', value : "男"},{key : '1', value : "女"}],  
 mode : "",  
 // -------------  
 stuParam : {},  
 defaultLabel : "",  
 request : {  
 bean: "studentScoreController",    // 后台请求控制器  
 method: "getSex",  // 后台请求方法名  
 }  
 };  
 },  
 created() {  
 // console.info("id", this.param);  
 },  
 mounted() {  
 let self = this;  
 //赋值  
 let formData = self.formData;  
 for (var key in formData) {  
 if(key == 'name'){  
 formData[key] = this.param['stuId']  
 this.defaultLabel = this.param['name']  
 }else{  
 formData[key] = this.param[key] || formData[key];  
 }  

 }  

 if(this.param.id){  
 this.mode = 'edit'  
 }else{  
 this.mode = 'add'  
 }  
 this.formDefaultData = Object.assign({}, this.formData);  
 this.resetForm('formDataForm')  

 },  
 methods: {  
 //查找带回  
 selectStudent(data){  
 if(data.length > 0){  
 this.formData.sex = data[0].sex  
 }  

 },  
 //保存  
 save(formName) {  
 let self = this;  
 self.$refs[formName].validate((valid) => {  
 if (valid) {  
 let formData = Object.assign({}, self.formData);  
​  
 delete formData.sex  
 //去除空的值  
 for (var key in formData) {  
 if (formData[key] === "" || formData[key] == null) {  
 delete formData[key];  
 } else {  
 formData[key] = formData[key].toString();  
 }  
 }  
 formData.student = {  
 id : formData.name  
 }  
 delete formData.name  

 let param = {  
 form: JSON.stringify(formData),  
 };  
​  
 //请求  
 self.$http.post("studentScoreController!saveform.m", qs.stringify(param)).then((res) => {  
 if (res.code != 500) {  
 this.$message({  
 message: res.data,  
 type: res.type,  
 });  
 if (res.type == "success") {  
 //关闭 tabs  
 self.$emit("tabmoved", "studentScore-" + self.mode);  
 }  
 }  
 });  
 } else {  
 this.$message({  
 message: "请完善数据",  
 type: "error",  
 });  
 return false;  
 }  
 });  
 },  
 //重置  
 resetForm(formName) {  
 let self = this;  
 this.defaultLabel = ""  
 this.$nextTick(() => {  

 self.formData = Object.assign({}, this.formDefaultData);  
 this.defaultLabel = this.param['name']  
 self.$refs[formName].clearValidate();  
 });  
 },  
 // code 校验  
 async getCodeResult(value) {  
 let self = this;  
​  
 let data = qs.stringify({  
 id: this.formData.id,  
 name: value,  
 });  
 let res = await self.$http.post("studentController!getCode.m", data);  
 return res;  
 },  

 },  
};  
</script>  
​

    图片展示：

image-20200917151033874.png

3、平台组件

3-1、EhSearchBack

属性

必填：

  • v-model (String | Number 必填) ：查找带回框的值
  • searchField (String 必填) 查询字段：查询到一行数据后，会返回的这个字段的值。
  • searchSelect (Boolean 必填)：是否启用模糊查询，默认：false
  • gridOptions (Object 必填)：类似 EhGrid 的 grid 和 dataSourse 的结合，明确规定查找带回需要查询的表格数据和样式。

非必填：

  • labelField (String 可选)：查询字段的展示字段：与 searchField 相对应，labelField 作为展示字段，searchField 作为实际值。
  • defaultLabel (String 可选)：初始展示名：与 labelField 相对应，defaultLabel 作为其初始展示字段。仅当 defaultLabel 与 v-model 同时赋予初始值时，才会生效。
  • button (Boolean)：是否将选择框改为按钮样式，默认为 false。 button 属性与 inputAttributes 属性共享。
  • showDialogLeft (Boolean)：是否展示查找带回弹窗左侧区域，宽度默认 200px。需与 dialog-left 插槽配合使用。
  • inputAttributes (Object) ： 输入框的属性，可继承 element 中 el-input 的属性。
  • dialogAttributes (Object) ： 模态框的属性，可继承 element 中 el-dialog 的属性。
  • openSearch (Boolean) : 打开弹窗即加载数据，默认 true。
  • filterForm (Object 非必填)：定义查找带回表格的简易查询模板，需要与插槽 filterBar 配合使用。

注意：当你修改的时候，如果要给查找带回赋值，就需要使用到 defaultLabel 属性，并且它赋值需要在 v-model 后面，特别的，如果你想对查找带回重置，这个时候你就需要先把 defaultLabel 的值置为 空 **，在重新赋值就像这个样子 **

 this.defaultLabel = ""  
 this.$nextTick(() => {  
   
 self.formData = Object.assign({}, this.formDefaultData);  
 this.defaultLabel = this.param['name']  
 self.$refs[formName].clearValidate();  
 });
插槽（filterBar）

通过此插槽自定义查找带回表格的过滤表单。需和传入属性 filterForm 配合使用。

插槽标签应有俩个属性，slot=“filterBar”，slot-scope=“scope”。 slot 即插槽名，slot-scope 即该组件赋予的可访问 filterForm 的值，可以理解为 scope.filter == filterForm。表单里建议使用 v-model 绑定 filterForm 里的每个值，这样就自带双向绑定，无需再做其他赋值操作。

<eh-search-back   
 :filterForm="{  
 code:{field:'code',compare:'cn',data:''},  
 id:{field:'id',compare:'cn',data:'8'}  
 }">  
 <template slot="filterBar" slot-scope="scope">  
 <el-form :inline="true" size="mini">  
 <el-form-item label="编码">  
 <el-input v-model="scope.filter.code.data" placeholder="编码"></el-input>  
 </el-form-item>  
 <el-form-item label="id">  
 <el-input v-model="scope.filter.id.data" placeholder="id"></el-input>  
 </el-form-item>  
 </el-form>  
 </template>  
</eh-search-back>  
​
dialog-left

如果 showDialogLeft 属性为 true，则该展示该插槽里的内容。

<eh-search-back :showDialogLeft="true">  
 <template slot="dialog-left">  
 <el-tree :data="data"></el-tree>  
 </template>  
</eh-search-back>
方法
  • searchGrid：通过调用这个组件的实例方法，触发查找带回弹窗表格重新加载数据的操作。
事件
  • input：当选择值发生改变时，即触发此回调，返回所选的字段值。
  • selectedRows：当选择值发生改变时，即触发此回调，返回所选行的数据。

注意：input 和 selectedRows 有区别，input 返回的是当前查找带回的所选的字段值，而 selectedRows 返回的是选择的整行数据。

3-2、EhSelect

属性
  • v-model (String, Number)：双向绑定的选择框的实际值。
  • keyName 定义选项的展示值（keyName）和
  • valueName (String 必填)：定义选项实际值（valueName）的名称。
  • selectOptions：传入选择框的可用选项
  • selectRequest (String, Object)：选择框的选项数据（options）请求方法。
  • relatedSelect (Array sync)：联动选择框的的选项数据。与 relatedRequest 配合使用, 一般初始值为空数组，在当前选择框的值改变时 动态加载赋值。
  • relatedRequest (Object)：联动选择框选项请求的配置属性。
  • focusLoad (Boolean)：延迟加载，是否聚焦到输入框之后再加载数据
  • width (String)：选择框宽度。（“px”, “%” , “vw”）
  • label (String)：如果有 label 属性，则在选择框前加一段 label。
  • SelectAttributes (Boolean)：继承 element el-select 的配置属性。
事件

changeOption：当选择框选中的值发生变化时，调用此方法，返回的参数为新选中的选项。

<eh-select keyName="label" valueName="value" @changeOption="change" ></eh-select>  
...  
methods: {  
 change(option) {  
 console.log(option) // option为选中的选项  
 },  
}
下拉框的使用

对于简单的一个下拉框的使用：

<eh-select   
 v-model="formData.sex"   
 keyName="value"   
 valueName="key" :selectRequest="selectRequest" >  
</eh-select>  
<script>  
 data() {  
 return {  
 //selectRequest 的属性  
 selectRequest :{  
 // 请求完整地址, 若存在此值，bean与method就会被替代。  
 request: "bppComboxController!createOperationHeadCombox.m",  
 bean: "bppComboxController",    // 后台请求控制器  
 method: "createOperationHeadCombox",  // 后台请求方法名  
 formData: null, // object 若有formdata参数  
 params: null,   // object 若有url参数  
 },  
​  
    
 }  
   
    
 }  
</script>

注意：

    • formData 参数和 params 参数还是有区别的，根据实际情况选择使用什么参数传参。

    • 对于 request，如果写了它可以不使用 bean 和 method，但是我建议使用 bean 和 method。

    • 注意keyName 和 valueName，别写反了。

级联：

<!-- 初始选择框 -->  
<eh-select keyName="label" valueName="value" selectRequest="bppComboxController!createOperationHeadCombox.m" :relatedRequest="relatedRequest" :relatedSelect.sync="relatedSelect"></eh-select>  
<!-- 联动选择框，把联动属性当作输入选项的数据 -->  
<eh-select keyName="label" valueName="value" :selectOptions="relatedSelect" ></eh-select>  
<script>  
data(){  
 return {  
 relatedSelect: [],   
 relatedRequest:{  
 request: "bppComboxController!createOperationHeadCombox.m",  
 paramName: "routeGid",   // 此属性是查询参数名。 通过上一级选择框的值，作为参数查询下一级的选项  
 bean: "",    // 后台请求控制器  
 method: "",  // 后台请求方法名  
 formData: null, // object 若有formdata参数  
 },  
 }  
}  
</script>

注意：

  • relatedSelect 属性完整写法是relatedSelect.sync，不能写错。

  • relatedSelect.sync 与 selectOptions 的值应该保持一致，一般是定义的一个空数组

  • paramName 是 父级选中之后的参数。

4、封装查找带回

1、首先在查找带回的目录下创建你的文件。
2、完成查找带回的封装

封装的属性和方法：

  • searchField：必填

  • labelField

  • defaultLabel

  • searchSelect ：在这里一直默认模糊查询为 true，如果你想要它可以自己去调节是否打开你可以 params.searchSelect == true ? true : false

  • gridOptions：必填

  • filterForm

  • inputAttributes

  • selectedRows

  • input

属性的定义以及有树的查找带回

在前面定义的那些属性中，我并没有在 data 里面去定义，但它为什么可以去使用呢，因为我在 props里面定义它是什么类型，默认返回值。如果查找带回想加上树，你可以把 showDialogLeft 置为 true, 并且使用

<template slot="dialog-left">  
 <el-tree :data="data"></el-tree>  
 </template>

watch 监听

如果你想对数据在页面加载的时候一直能观察到，你可以使用 watch 对它做监听，它的值只要改变就可以被检测到，然后可以做想要做的操作。它可以监听的对象还包括对象，如果这个对象很复杂，你可以使用 deep ：true，如果想一直监听这个对象，你可以使用immediate: true,

在本次学生查找带回中，因为想让它返回的值是双向绑定的，所以特意定义了一个 vModel 并监听它并且返回 给页面。

<template>  
<!-- 学生查找带回 -->  
 <div id="studentSearchBack">  
 <eh-layout>  
 <div slot="center">   
 <eh-search-back  
 v-model="vModel"  
 :searchField="searchField"  
 :searchSelect="true"  
 :labelField="labelField"  
 :defaultLabel="defaultLabel"  
 @selectedRows="selectOpCode"  
 @input="returnCode"  
 :gridOptions="lookUpGridOptions"  
 :filterForm="filterFormObj"  
 :inputAttributes="params.inputAttributes"  
 >  
 <template slot="filterBar" slot-scope="scope">  
 <el-form  
 :inline="true"  
 size="mini"  
 class="form-searchback"  
 label-width="85px"  
 label-position="left"  
 >  
 <el-form-item label="姓名">  
 <el-input v-model="scope.filter.name.data" ></el-input>  
 </el-form-item>  
 </el-form>  
 </template>  
 </eh-search-back>  
 </div>  
 </eh-layout>  
 </div>  
</template>  
<script>  
import qs from "qs";  
const lookUpGridOptions = {  
 dataSource: {  
 bean: "studentController",  
 method: "select",  
 entity: "com.epichust.entity.Student",  
 filters: [],  
 },  
 grid: {  
 stripe: true,  
 border: true,  
 columns: [  
 {  
 prop: "id",  
 label: "id",  
 visible: false,  
   
 width : "120px",  
 },  
 {  
 label: "姓名",  
 prop: "name",  
 width : "120px",  
 sortable: true  
 },  
 {  
 label: "性别",  
 prop: "sex",  
 width : "120px",  
 formatter : (row,cel) => {  
 return row.sex == 0 ? '男' : "女"  
 }  
 },  
 {  
 prop: "age",  
 label: "年龄",  
 width: "200px",  
 sortable : true  
 },  
 {  
 label: "班级",  
 prop: "className",  
 width : "120px",  
 },  
 {  
 prop: "phone",  
 label: "电话",  
 width: "200px",  
 },  
 {  
 prop: "score",  
 label: "分数",  
 width: "200px",  
 pass : true  
 },  
 ],  
 defaultSort: {  
 prop: "name",  
 order: "asc",  
 },  
 selectMax: 1,  
 pagination: {  
 pageSize: 10,  
 },  
 },  
 options: {  
 // 是否显示编辑过滤  
 showFilterTemplate: false,  
 extraParamFields: {  
   
 },  
 usetotal: true,  
 },  
};  
export default {  
 name: "studentSearchBack",  
 props: {  
 value: {  
 required: true,  
 // type: (String || Array),  
 default() {  
 return "";  
 },  
 },  
 searchField: {  
 required: true,  
 // type: (String || Array),  
 default() {  
 return "";  
 },  
 },  
 labelField: {  
 required: false,  
 // type: (String || Array),  
 default() {  
 return "";  
 },  
 },  
 defaultLabel : {  
 required: false,  
 // type: (String || Array),  
 default() {  
 return "";  
 },  
 },  
 params: {  
 required: false,  
 type: Object,  
 default() {  
 return {};  
 },  
 },  
 },  
 data() {  
 return {  
 lookUpGridOptions: lookUpGridOptions,  
 filterFormObj: {  
 // 过滤的字段名作为属性名  
 name: {  
 field: "name", // 过滤的字段  
 compare: "cn", // 比较方式  
 data: "", // 默认值  
 },  
 },  
 vModel: "",  
 };  
 },  
 created() {  
   
 // console.info("param", this.param);  
 },  
 watch: {  
 value : {  
 handler : function (newval, oldVal){  
 if(newval != oldVal){  
 this.vModel = newval  
 }  
 },  
 deep : true,  
 immediate: true,  
 },  
   
 vModel: {  
 handler : function (newval, oldVal){  
 this.$emit("input", newval);  
 },  
 deep : true,  
 immediate: true,  
 },  
 },  
 // 计算属性  
 computed: {},  
 mounted() {  
    
 },  
 methods: {  
 selectOpCode(val) {  
 if(val.length < 1){  
 this.$message({  
 message : "请选中一行数据！",  
 type : "error"  
 })  
 }  
 this.$emit("selectedRows", val);  
 },  
    
 returnCode(valueCode) {  
 this.$emit("input", valueCode);  
 },  
 },  
};  
</script>  
​

注意：

  • 在文件前面著名这是一个什么样的查找带回。

    • 例如

      image-20200917160802132.png

  • 数据源 gridOptions里面的值定义在data和data外面是有区别的，data 里面的数据相当于一个局部的，作用域有着明显区别。如果你在一个页面引入了多次这个查找带回，而传入的参数却又不一样，这个时候你的数据源应该写在data里面