若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据

目录

1.适用场景

多个表格中存在同一字段，并且可通过该字段查到与之对应的数据。举个简单的例子，比如我有一个学生表、一个老师表、一个课程表，假设老师表和学生表里都有课程ID这一字段，那么我可以在课程表里通过课程ID来，查找需要上这门课的学生，以及教这门课的老师，并且在课程表页面展示出来，使系统更加人性化。

2.具体页面展示

如图所示，钢板物料编号这一字段绑定了零件和余料，点击后可在对话框弹出绑定的清单

3.代码实现

1.将需要展示的清单定义为组件

可用若依代码生成器生成，删掉原有的按钮等，只留下分页和列数据即可，根据具体需求取舍。定义组件名称，方便父组件import，同时定义props来传参。

exportdefault{name:"SubPart",props:{code:null,optType:null},data(){return{// 遮罩层loading:true,// 选中数组ids:[],// 非单个禁用single:true,// 非多个禁用multiple:true,// 显示搜索条件showSearch:true,// 总条数total:0,// 表格数据list:[],// 弹出层标题title:"",// 是否显示弹出层open:false,// 查询参数queryParams:{pageNum:1,pageSize:10,matCode:null,matVersion:null,code:this.code,},// 表单参数form:{},// 表单校验rules:{}};},created(){this.getList();},methods:{}}

部分参数说明：

• code: 父组件绑定的列数据，通过它来关联两个表的查询参数

2.父组件中引用子组件

import SubPart from'./subpart';

由于我采用的是部分引用，所以还得加components属性

exportdefault{name:"Parent",components:{
    SubPart
  },}

3.父组件新增optType字段控制弹出层展示内容

在父组件对话框中添加

v-if

条件

<el-form ref="form":model="form":rules="rules" label-width="80px" v-if="optType != 'view'">
 注：在新增和修改按钮上也要加`v-if`，判断一下optType

4.将子组件添加到父组件的弹出层中

<el-tabs type="border-card" v-if="form.steelCode !== null"><el-tab-pane label="零件清单"><SubPart ref="subPart":code="form.code":optType="optType
            </SubPart></el-tab-pane></el-tabs><div slot="footer"class="dialog-footer"><el-button type="primary" @click="cancel" v-if="optType === 'view'">返回</el-button><el-button type="primary" @click="submitForm" v-if="optType !== 'view'">保 存</el-button>

5.父组件绑定列数据

<el-table-column label="编号" align="center" prop="code"><template slot-scope="scope"><el-button type="text" @click="handleView(scope.row)">{{ scope.row.code }}</el-button></template></el-table-column>

6.父组件实现点击事件方法

handleView(row){this.form.code = row.code;this.getList();this.open =true;this.title ="查看明细";this.optType ="view";},

4.总结

知识点：自定义组件、组件间通信、slot-scope插槽