目录
1.适用场景2.具体页面展示3.代码实现1.将需要展示的清单定义为组件2.父组件中引用子组件3.父组件新增optType字段控制弹出层展示内容4.将子组件添加到父组件的弹出层中5.父组件绑定列数据6.父组件实现点击事件方法
4.总结
1.适用场景
多个表格中存在同一字段，并且可通过该字段查到与之对应的数据。举个简单的例子，比如我有一个学生表、一个老师表、一个课程表，假设老师表和学生表里都有课程ID这一字段，那么我可以在课程表里通过课程ID来，查找需要上这门课的学生，以及教这门课的老师，并且在课程表页面展示出来，使系统更加人性化。
2.具体页面展示
如图所示，钢板物料编号这一字段绑定了零件和余料，点击后可在对话框弹出绑定的清单
3.代码实现
1.将需要展示的清单定义为组件
可用若依代码生成器生成，删掉原有的按钮等，只留下分页和列数据即可，根据具体需求取舍。定义组件名称，方便父组件import，同时定义props来传参。
export default {
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属性
export default {
name: "Parent",
components: {
SubPart
},
}
3.父组件新增optType字段控制弹出层展示内容
在父组件对话框中添加v-if条件
注：在新增和修改按钮上也要加`v-if`，判断一下optType
4.将子组件添加到父组件的弹出层中
5.父组件绑定列数据
6.父组件实现点击事件方法
handleView(row) {
this.form.code = row.code;
this.getList();
this.open = true;
this.title = "查看明细";
this.optType = "view";
},
4.总结
知识点：自定义组件、组件间通信、slot-scope插槽
推荐文章
您阅读本篇文章共花了：
发表评论