vue 页面复用的问题

Question

<template>
  <div>
    <div>
      <el-button v-if="isAdd">保存</el-button>
      <div v-else>
        <el-button>新建一单</el-button>
        <el-button>关闭页面</el-button>
      </div>
    </div>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="姓名">
        <el-input v-if="isAdd" v-model="formInline.user" placeholder="请输入"></el-input>
        <span v-else>{{}}</span>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-if="isAdd" v-model="formInline.age" placeholder="请输入"></el-input>
        <span v-else>{{formInline.age}}</span>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-if="isAdd" v-model="formInline.sex" placeholder="请选择">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
        <span v-else>{{formInline.sex}}</span>
      </el-form-item>
      <el-form-item label="语文">
        <el-input v-if="isAdd" v-model="formInline.yuwen" placeholder="请输入"></el-input>
        <span v-else>{{formInline.yuwen}}</span>
      </el-form-item>
      <el-form-item label="数学">
        <el-input v-if="isAdd" v-model="formInline.shuxue" placeholder="请输入"></el-input>
        <span v-else>{{formInline.shuxue}}</span>
      </el-form-item>
      <el-form-item label="英语">
        <el-input v-if="isAdd" v-model="formInline.yingyu" placeholder="请输入"></el-input>
        <span v-else>{{formInline.yingyu}}</span>
      </el-form-item>
      <el-form-item label="体育">
        <el-input v-if="isAdd" v-model="formInline.tiyu" placeholder="请输入"></el-input>
        <span v-else>{{formInline.tiyu}}</span>
      </el-form-item>
      <el-form-item label="美术">
        <el-input v-if="isAdd" v-model="formInline.meishu" placeholder="请输入"></el-input>
        <span v-else>{{formInline.meishu}}</span>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-if="isAdd" v-model="formInline.banji" placeholder="请选择">
          <el-option label="七年级" value="七年级"></el-option>
          <el-option label="八年级" value="八年级"></el-option>
          <el-option label="九年级" value="九年级"></el-option>
        </el-select>
        <span v-else>{{formInline.banji}}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isAdd:  true,
      formInline: {
        user: '',
        age: '',
        sex: '',
        yuwen: '',
        shuxue: '',
        yingyu: '',
        tiyu: '',
        meishu: '',
        banji: ''
      }
    };
  },
  methods: {
  }
};
</script>

现在有如上图的 2个 页面， 一个是新增编辑页面， 另一个是展示页面， 页面结构都是一样，只是可不可编辑的区别...想写一个页面，进行复用， 于是有了下面的代码（通过isAdd 来判断是否是增加页面还是展示页面， template 模板 也用了v-if 和v-else 来决定显示编辑框或者不显编辑框，可能这是最简单或者最low 的写法了吧。。 ） 但是，如果页面中有很多很多编辑框，需要处理的事件方法也有很多的话， 按照上面代码的写法 就会让页面显得很臃肿，并且看起来会很乱....
想请教一下， 如果要进行页面复用， 该怎么写页面比较好...

Answer 1

展示页面不让表单编辑就好了

<el-form :disabled="!isAdd">
    ...
</el-form>

当然你如果展示页面和新增页面表单显示的样式不同, 那就只能你这样 或者自己写上样式

Answer 2

avue form detail
你可以参考这个。

实现思路，和 楼上kkopite 说的是差不多的。

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini"  :disabled="!isAdd" :class="{'detail':!isAdd}">

写个样式，把表单的样式改成不带边框的即可：

.detail{
  /deep/{
    .el-input.is-disabled .el-input__inner{
        color: #606266;
        background-color: #fff;
        border: none;      
    }    
    .el-input__suffix {
        display: none;
    }
  }
}

示例：编辑时的详情表单