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


element-ui/vue入门到精通-开发框架文库

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

template

HTML 全选
<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

JavaScript 全选
<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>

页面效果

Element组件01:客户详情编辑页面提交数据

对话框

Element组件01:客户详情编辑页面提交数据

 

版权声明:本文为开发框架文库发布内容,转载请附上原文出处连接
C/S框架网
评论列表

发表评论

评论内容
昵称:
关联文章

VUE+Element-UI入门精通客户详情资料编辑提交数据
Vue+Element-UI客户管理页面查询功能实现
VSCode+VUE+Element-UI学习资料大全
WEB开发框架开发环境:VSCode+VUE+Element UI
隐藏界面的明细编辑数据编辑
Vue启动自定义面,Editor.vue
数据编辑禁止刷新数据
Web端使用VUE调用WebApi接口实现用户登录采用Token方式数据交互
CSFrameworkV6 - 支持单表基础资料表格批量编辑数据(IGridDataWatcher接口DevExpressGridViewWatcher使用)
SQL注入漏洞全接触--入门
客户资料 - Customer List
Asp.Net防止多次提交数据(转)
访客详情
VSCode开发Vue项目文件目录结构说明
C#使用Multipart form-data方式上传文件提交其他数据
CSFramework.WebApi新手入门实战开发教程(C#+VS2017)
ASP.NET MVC快速入门(一)
MQ消息队列(1)RabbitMQ入门介绍环境搭建
Element-UI el-button按钮组件
CSFramework C#代码生成器生成窗体界面UI,BLL,DAL,Model,WCF接口层源代码