昔有朝歌夜弦之高樓蹋宦，上有傾城傾國之舞袖猿涨。

在此附上我的QQ: 2489757828 有問題的話可以一同探討
我的github: 李大玄
我的私人博客: 李大玄
我的簡書: 李大玄
我的CSDN: 李大玄
Example

產品提了一個需求，在系統中添加一個用戶功能模塊仰迁，需要實現添加、修改、查看功能

從設計圖中看到的 ui 情況是創(chuàng)建與修改界面完全相同灶泵，區(qū)別在于修改時有表單中有默認的數據, 查看與編輯頁面布局上差不多，區(qū)別是只讀对途，沒有保存按鈕

在這里插入圖片描述

目錄結構

user
|- common.vue
|- create.js
|- edit.js
|- check.vue

創(chuàng)建用戶

把創(chuàng)建與編輯的公共部分寫到一個父類中赦邻，在父類中定義好兩邊都需要的方法或者屬性
common.vue

<template>
  <div style="width: 500px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="年齡">
        <el-input v-model="form.age"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
/**
 * @description 創(chuàng)建與編輯的公共邏輯
 */
export default  {
  data () {
    return {
      form: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    // 保存
    onSubmit() {
    },
    // 取消
    onCancel() {
    }
  }
}
</script>

create.js

/**
 * @file 創(chuàng)建用戶
 * @author xxx
 */

// 引入基礎模塊
import Common from './common'

export default  {
  name: 'CreateUser',
  // 繼承
  extends: Common,
  methods: {
    // 重寫保存方法
    onSubmit() {
      // 在此處開發(fā)創(chuàng)建用戶的業(yè)務邏輯
      console.log(this.$data.form)
    }
  }
}

編輯用戶

編輯與創(chuàng)建很相似，代碼也比較雷同实檀，區(qū)別在于加載組件時需要從API中獲取用戶詳情數據, 保存時與調用編輯用戶API 接口

edit.js

/**
 * @file 編輯用戶
 * @author xxx
 */

// 引入基礎模塊
import Common from './common'

export default {
  name: 'EditUser',
  // 繼承
  extends: Common,
  created() {
    this.getUserDetails();
  },
  methods: {
    /** 獲取用戶詳情數據 */
    async getUserDetails() {
      const user = {
        name: '張三',
        age: 20
      }
      setTimeout(() => {
        this.$data.form = user;
      });
    },
    // 重寫保存方法
    onSubmit() {
      // 在此處開發(fā)編輯用戶的業(yè)務邏輯
    }
  }
}

查看用戶

上面介紹過惶洲，查看用戶與編輯用戶的功能有重合的部分，從用戶角度分析區(qū)別是 ui 的布局, 這里我們在開發(fā)是則不在繼承 common 模塊膳犹，繼承 edit 模塊恬吕，重寫 ui 部分

check.vue

<template>
  <div style="width: 500px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <span>{{ form.name }}</span>
      </el-form-item>
      
      <el-form-item label="年齡">
        <span>{{ form.age }}</span>
      </el-form-item>
      
      <el-form-item>
        <el-button @click="onCancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import EditUser from './edit';
export default {
  name: 'CheckUser',
  // 繼承
  extends: EditUser,
}
</script>