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

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