vue修改和新增共用一个对话框，计算机属性computed计算出title或者label以及placeholder对应不同的显示

<button @click="menumodify">新增</button>
<button @click="menuxg">修改</button>

<el-dialog :title="title2" :visible.sync="dialogVisible4" width="20%" @close="menuresetForm">
      <el-form :rules="rules" ref="ruleForm" :model="form2" label-width="80px">
        <el-form-item :label="label" prop="name">
          <el-input v-model="form2.name" :placeholder="'请输入'+label"></el-input>
        </el-form-item>

  <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible4 = false">确 定</el-button>
      </span>
</el-dialog>

data(){
  return:{
     title2:'新增',
}
}

computed:{
   label(){
    if(this.title2=="新增"){
      return '名称'
    }else{
      return '菜单名'
    }
   }
  },


methods:{
    menumodify(){
      this.title2="新增子菜单"
      this.dialogVisible4 = true;
    },
 menuxg(){
     this.title2 = "修改子菜单"
     this.dialogVisible4 = true;
    },
}