1、 效果图如下：

2、实现步骤

1. 在department.vue页面中的代码步骤

   1. 在<template>标签中添加功能按钮查看，添加onclick函数: departmentHandle(scope.row.id)

      <el-button type="text" size="small" @click="departmentHandle(scope.row.id)">查看</el-button>
      

   2. 在<script>标签中引入vue页面

      import DepartmentInfo from './department-info'
      

   3. 在<script>标签中components引入组件

      components: {
          DepartmentInfo
      }
      

   4. 在<template>标签中添加弹窗

      <department-info v-if="departmentInfoVisible" ref="departmentInfo"></department-info>
      

   5. 在<script>标签中添加 departmentHandle(id) 函数

      // 用户点击查看按钮后，将departmentInfoVisible设置为true，让弹窗出现
      // 将
      departmentHandle (id){
        this.departmentInfoVisible = true
        this.$nextTick(()=>{
          this.$refs.departmentInfo.init(id)
        })
      }
      

   6. 在<script>标签中的data内添加标志量 departmentInfoVisible并附初值false

      departmentInfoVisible: false
      

   7. 在<template>标签中添加弹窗

      <department-info v-if="departmentInfoVisible" ref="departmentInfo"></department-info>
      

2. 在deparment-info.vue中的代码步骤，重点在init函数中

   1. 在<template>标签中添加<el-dialog>标签

      <template>
      	<el-dialog :title="'系别详情'" :close-on-click-modal="false" :visible.sync="visible">
      		<el-form :model="dataForm" ref="dataForm" label-width="120px">
      			<el-form-item label="系别名称" prop="departmentName">
      	      <el-button type="text" disabled>{{dataForm.departmentName}}</el-button>
      	    </el-form-item>
      			...
      		</el-form>
      	</el-dialog>
      </template>
      

   2. 在<script>标签中添加init(id)函数

      <script>
      	export default{
      		data(){
      			return{
      				visible: false,
      				dataForm:{
      					id: 0,
      					departmentName: '',
      					...
      				}
      			}
      		}
      	},
      	methods: {
      			init (id) {
      			// 接收传过来的department.id值
      		  this.dataForm.id = id || 0
      		  this.visible = true
      		  this.$nextTick(()=>{
      		      if(this.dataForm.id) {
      		          this.$http({
      		              url: this.$http.adornUrl(`/baseinfo/department/info/${this.dataForm.id}`),
      		              method: 'get',
      		              params: this.$http.adornParams()
      		          }).then(({data}) => {
      		              if(data && data.code === 0){
      											this.dataForm.departmentName = data.department.departmentName
      											...
      		              }
      		          })
      		      }
      		  })
      		}
      	}
      </script>