vue中使用element-ui dialog(多个公用)

vue中使用element-ui dialog(新增和编辑公用)

html内容

<el-button type="text" class="button"  @click="creatBusinCent()">增加el-button>
<el-dialog  width="39%" :title="titleName[dialogStatus]" :visible.sync="dialogFormVisible">
  <el-form
     ref="ruleForm"
     :model="ruleForm"
     :rules="rules"
     label-width="160px"
     class="demo-ruleForm creatBusinessCenter"
   >
     <el-form-item label="应用id：" prop="appId">
       <el-select clearable v-model="ruleForm.appId" @change="getappName" placeholder="请选择前端应用">
         <el-option v-for="(item,index) in myApps" :key="index" :label="item.appName" :value="item.appId" />
       el-select>
     el-form-item>
     <el-form-item>
       <el-button  type="primary" @click="submitForm('ruleForm')">确定el-button>
       <el-button class="cancelBtn" @click="resetForm('ruleForm')">取消el-button>
     el-form-item>
   el-form>
 el-dialog>
//列表
<template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" fixed type="index" label="序号" width="70">el-table-column>
        <el-table-column align="center" prop="appName" show-overflow-tooltip label="应用名称" min-width="109">el-table-column>
        <el-table-column align="center" prop="spiName" show-overflow-tooltip  label="spi名称" min-width="148">el-table-column>
        <el-table-column align="center" prop="callbackUrl" show-overflow-tooltip label="反馈URL" min-width="148">el-table-column>
        <el-table-column align="center" prop="token" show-overflow-tooltip label="token" min-width="148">el-table-column>
        <el-table-column align="center" class="app-link" label="操作" min-width="137">
          <template slot-scope="scope">
            <el-button @click.native.prevent="editSPI(scope.row, tableData),dialogFormVisible = true" type="text" style="color:red" size="small">编辑el-button>
            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" style="color:red" size="small">删除el-button>
          template>
        el-table-column>
      el-table>
    template>

js内容

data(){
	return{
		// dialog弹框名称
	   titleName: {
	     add: '新增',
	     edit: '编辑'
	   },
	   dialogStatus: '' 
   },
   methods: {
   	creatBusinCent(){  //创建
		this.dialogFormVisible = true
	       this.dialogStatus = "add"
	   },
	   resetForm(){ //编辑
	   	this.dialogFormVisible = true
	   	this.dialogStatus = "edit"
	   }
   }
   
}