vue element-ui 常见的新增、编辑、查看公用同一个页面

vue  element-ui 常见的新增、编辑、查看公用同一个页面

1.父组件代码篇（index.vue）

• 父组件页面结构如下：

<template> 
  <div class="JNPF-common-layout">
    <el-table v-loading="listLoading" :data="list">
      <el-table-column prop="jhmc" label="辨识评价计划名称" align="left" />
	  <el-table-column prop="bskssj" label="辨识开始时间" align="left" />
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <!-- 按钮触发事件公用一个方法名addOrUpdateHandle() -->
  
	      <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" >
            编辑
          </el-button>

          <el-button type="text" @click="addOrUpdateHandle(scope.row.id, true)" > 
            详情
          </el-button>
 
          <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">
	        新增
          </el-button> 

        </template>
      </el-table-column>
    </el-table>
    <!-- 用于引入子组件      @refresh自定义函数是用于刷新页面 -->
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
  </div>
</template> 

• 父组件 addOrUpdateHandle（）方法如下：
   

  <script>
    import JNPFForm from './form' // 引入子组件form表单
    export default {
      components: {JNPFForm}, // 注册子组件
      data() {
        return {
          formVisible: false,
        }
      },
      methods: { 
        // isDetail 是详情传过来的true的值，用来区分详情和查看
        addOrUpdateHandle(id,isDetail) {
          this.formVisible = true // 控制弹出框显示
          this.$nextTick(() => {
            this.$refs.JNPFForm.init(id,isDetail)  // init（）是子组件函数
          })
        },
      },
    }
  </script>

  2.子组件代码篇（form.vue）关键代码

•   子组件页面结构

<template>

  <!-- 关键代码：:title="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" -->

  <el-dialog :title="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="800px">
    <el-row :gutter="15">

      <!-- :disabled="!!isDetail" 详情表单内容禁用状态 编辑为可编辑状态-->

      <el-form ref="elForm" :model="dataForm" label-width="139px" :disabled="!!isDetail">
        <el-col :span="24">
		  <el-form-item label="辨识评价计划名称" prop="jhmc" >
		    <el-input v-model="dataForm.jhmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
			</el-input>
		  </el-form-item>
		</el-col>
		<el-col :span="24">
		  <el-form-item label="辨识开始时间" prop="bskssj" >
			<el-date-picker v-model="dataForm.bskssj" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
			</el-date-picker>
		  </el-form-item>
		</el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
	  <el-button @click="visible = false">取 消</el-button> 
	  <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">
        确 定
      </el-button>
	</span>
  </el-dialog>
</template>

• 子组件 init（）方法

  <script>
    export default {
      data() {
        return {
          visible: false,
          dataForm: {}
        }
      },
      methods: {
  
        init(id, isDetail) {
          this.dataForm.id = id || 0; // 如果有id就是编辑或者查看，没有id就是新增
          this.visible = true; // 打开弹窗
          this.isDetail = isDetail || false; // isDetail为true就是详情,没有isDetail就是false为编辑
          this.$nextTick(() => {
            this.$refs['elForm'].resetFields(); // 清空表单
            // 如果有id就是编辑查看，这里的请求用于做数据回填
            if (this.dataForm.id) {
              request({
                url: '/api/System/riskPlan/' + this.dataForm.id, // 根据项目接口写url
                method: 'get'
              }).then(res =>{
                this.dataForm = res.data; // 数据回填
                this.total = this.fxdszArr.length // 总条数
              })
            }
          })
        },
      },
  
    }
  </script>