一、定义button 按钮

<el-button v-if="$route.meta.btns.viewBtn" size="mini" type="primary" icon="el-icon-view" @click="viewGroupData">查看工作组 </el-button>

二、查看函数

viewGroupData: function () {
    const rows = this.getSelectRows();
    this.taskCode = rows[0].taskCode;
    this.taskName = rows[0].taskName;
    this.groupviewVisible = true;
},

三、弹出框的查看

<!--查看工作关系-->
<el-dialog
        :title="'任务名称:'+taskName"
        :visible.sync="groupviewVisible"
        v-if="groupviewVisible"
        width="60%">
    <task-group-view ref="taskGroupView" :taskCode="taskCode" :taskName="taskName"/>
</el-dialog>

四、导入模块

import taskGroupView from './taskGroupRefView';

components: {

    taskGroupView,

},

五、创建具体的查看

<!--工作组的显示，yangzhu-->
<template>
    <el-card class="box-card" shadow="never">
        <elx-table ref="table"
                   :url="url"
                   :columns="columns"
                   :initParams="initParams"
                   :searchParams="searchParams">
        </elx-table>
    </el-card>
</template>
<script>
    export default {
        name: 'taskGroupRefView',
        components: {},
        props: {
            taskCode: String,
            taskName: String
        },
        data() {
            return {
                url: "/loan/taskGroupRefAction.do?_md=selectGroupRef",
                groupviewVisible: false,
                columns: [
                    {
                        prop: "groupCode",
                        label: "执行组编码"
                    }, {
                        prop: "groupName",
                        label: "执行组名称"
                    }, {
                        prop: "parentGroupCode",
                        label: "前置执行组"
                    }, {
                        prop: "groupLev",
                        label: "执行顺序"
                    }],
                initParams: {
                    "taskCode": this.taskCode,
                },
                searchParams: {},
                groupCode: '',
            }
        },
        methods: {
            getSelectRows() {
                return this.$refs.table.getSelectedRows();
            },
            search() {
                this.$refs.table.search();
            },
            refreshTable() {
                this.$refs.table.refresh();
            },
            resetForm() {
                this.$refs.searchParams.resetFields();
            }
        }
    };
</script>