VUE+Element-UI入门到精通：客户详情页资料编辑及提交数据

<template>
  <div id="editor">
    <h1>组件使用：</h1>
    <h2>el-form / el-form-item / el-input / el-row / el-col / el-button</h2>
    <h1>其他：confirm() / message()</h1>
    <div style="border:solid 1px #dadada;padding:10px;">
      <el-container>
        <el-header>客户详情</el-header>
        <el-form ref="form"
                 :model="form"
                 label-width="80px">
          <el-row gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="客户编号">
                  <el-input v-model="form.id"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="客户名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="电话号码">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="地址">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <div class="grid-content bg-purple-dark">
              <el-form-item label="备注">
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-main>
          <el-button type="warning"
                     v-on:click="onSubmit">提交数据</el-button>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Editor',
  data () {
    return {
      name: 'Editor',
      form: {
        id: '0001',
        name: 'www.cscode.net',
        phone: '13888888888',
        address: '广东东莞',
        remark: '备注信息'
      }
    }
  },
  methods: {
    // 提交数据按钮事件
    onSubmit () {
      var msg = '确定要提交数据吗? \n ' // 不断行？
      msg = msg + `ID:${this.form.id} Name:${this.form.name}`
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 这里写逻辑：调用后台接口提交数据？？
        var ok = this.postData(this.form)
        if (ok) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '保存失败!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '用户取消操作！'
        })
      })
    },
    // 调用API提交数据
    postData (data) {
      // 调用API提交数据,返回结果
      // return true
      return false
    }
  }
}
</script>