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

这篇具有很好参考价值的文章主要介绍了若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.适用场景

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

2.具体页面展示

若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据,ui,vue.js,前端,ruoyi,elementui
如图所示，钢板物料编号这一字段绑定了零件和余料，点击后可在对话框弹出绑定的清单

若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据,ui,vue.js,前端,ruoyi,elementui

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条件

 <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";
    },