[element-ui 表单基本用法] 学习笔记

最新推荐文章于 2024-05-24 00:16:16 发布
最新推荐文章于 2024-05-24 00:16:16 发布
阅读量105 收藏
点赞数
文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tester_yangzai/article/details/130568476
版权

学习文档: https://www.youbaobao.xyz/admin-docs/guide/base/element.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95
element-ui文档: form

表单基本用法

  1. el-form 容器，通过 model 绑定数据
  2. el-form-item 容器，通过 label 绑定标签
  3. 表单组件通过 v-model 绑定 model 中的数据
<template>
  <div id="app">
    <el-form inline :model="data">
      <el-form-item label="审批人">
        <el-input v-model="data.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="data.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      data: {
        user: 'sam',
        region: '区域二'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.data)
    }
  }
}
</script>

其它表单控件

  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>

表单属性

  1. label-position：标签位置，枚举值，left 和 top
  2. label-width：标签宽度
  3. label-suffix：标签后缀
  4. inline：行内表单
  5. disabled: 设置整个 form 中的表单组件全部 disabled，优先级低于表单组件自身的 disabled
     /* el-input 源码 */
inputDisabled() {
  return this.disabled || (this.elForm || {}).disabled;
}
  6. size：设置表单组件尺寸
    	/* el-input */
inputSize() {
  return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
_elFormItemSize() {
  return (this.elFormItem || {}).elFormItemSize;
}
/* el-form-item */
elFormItemSize() {
  return this.size || this._formSize;
},
_formSize() {
  return this.elForm.size;
}
  7. hide-required-asterisk: 是否隐藏必填字段的标签旁边的红色星号, 默认false
  8. show-message： 是否显示校验错误信息，默认 true

表单方法

  • resetFields()：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
    <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

表单校验基本用法

  1. 定义校验规则，可以绑定到 el-form 或 el-form-item
    data() {
  const userValidator = (rule, value, callback) => {
    if (value.length > 3) {
      callback()
    } else {
      callback(new Error('用户名长度必须大于3'))
    }
  }
  return {
    data: {
      user: 'sam',
      region: '区域二'
    },
    rules: {
      user: [
        { required: true, trigger: 'change', message: '用户名必须录入' },
        { validator: userValidator, trigger: 'change' }
      ]
    }
  }
}
  2. 指定 el-form-item 的 prop 属性
    <el-form-item label="审批人" prop="user">
  <el-input v-model="data.user" placeholder="审批人" clearable></el-input>
</el-form-item>
表单校验相关属性
  • hide-required-asterisk：隐藏必录标识
  • inline-message：验证消息是否在一行显示

表单校验高级用法

用法一：动态改变校验规则
  1. rules 只包含一个校验规则
    {
  rules: {
      user: [
        { required: true, trigger: 'change', message: '用户名必须录入' },
      ]
  }
}
  2. 动态添加 rules
    addRule() {
    const userValidator = (rule, value, callback) => {
      if (value.length > 3) {
        this.inputError = ''
        this.inputValidateStatus = ''
        callback()
      } else {
        callback(new Error('用户名长度必须大于3'))
      }
    }
    const newRule = [
      ...this.rules.user,
      { validator: userValidator, trigger: 'change' }
    ]
    this.rules = Object.assign({}, this.rules, { user: newRule })
}
用法二：手动控制校验状态

validate-status：验证状态，枚举值，共四种：

  • success：验证成功
  • error：验证失败
  • validating：验证中
  • (空)：未验证

error：自定义错误提示

  1. 设置 el-form-item 属性
    <el-form-item
  label="用户名"
  prop="user"
  :error="error"
  :validate-status="status"
>
<!-- ... -->
</el-form-item>
  2. 自定义 status 和 error
    showError() {
  this.status = 'error'
  this.error = '用户名输入有误'
},
showSuccess() {
  this.status = 'success'
  this.error = ''
},
showValidating() {
  this.status = 'validating'
  this.error = ''
}
案例
<template>
  <div id="app">
    <el-form
        :model="data"
        style="width: 500px"
        label-position="left"
        label-width="100px"
        label-suffix="："
        :inline="false"
        :rules="rules"
        :disabled="false"
        status-icon
        validate-on-rule-change
        hide-required-asterisk
        :inline-message="false"
    >
      <el-form-item
          label="用户名"
          prop="user"
          :error="error"
          :validate-status="status"
      >
        <el-input v-model="data.user" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="data.region" placeholder="活动区域" style="width:100%">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="addRule">添加校验规则</el-button>
        <el-button @click="showError">错误状态</el-button>
        <el-button @click="showSuccess">正确状态</el-button>
        <el-button @click="showValidating">验证状态</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        data: {
          user: 'sam',
          region: '区域二'
        },
        error: '',
        status: '',
        rules: {
          user: [
            { required: true, trigger: 'change', message: '用户名必须录入' }
          ]
        }
      }
    },
    methods: {
      /* eslint-disable */
      onSubmit() {
        console.log(this.data)
      },
      addRule() {
        const userValidator = (rule, value, callback) => {
          if (value.length > 3) {
            this.inputError = ''
            this.inputValidateStatus = ''
            callback()
          } else {
            callback(new Error('用户名长度必须大于3'))
          }
        }
        const newRule = [
          ...this.rules.user,
          { validator: userValidator, trigger: 'change' }
        ]
        this.rules = Object.assign({}, this.rules, { user: newRule })
      },
      showError() {
        this.status = 'error'
        this.error = '用户名输入有误'
      },
      showSuccess() {
        this.status = 'success'
        this.error = ''
      },
      showValidating() {
        this.status = 'validating'
        this.error = ''
      }
    }
  }
</script>
tester_yangzai
关注
4_Element-UI笔记.pdf
08-27
在`App.vue`文件中，可以添加Element-UI的组件来体验其使用方法，比如按钮和日期选择器： ```html <el-button type="primary">第1个element按钮</el-button> <el-date-picker type="datetime" ...
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
ElementUI介绍 & 表单form & 表格table
marsmoon的博客
12-15 4703
elementUI简单介绍, 及组件form和table的使用
elementUI之tag标签讲解
夏日漱石的博客
05-21 4194
elementUI之tag标签讲解
使用element-ui中的el-form和el-table嵌套实现表格内容编辑并提交表格表单数据校验(可以对勾选到的表格内容必填校验+勾选框)
热门推荐
LewisRoc的博客
08-23 1万+
表格内有表单项支持编辑、保存时能对复选框勾选的部分表格数据进行表单校验
vue基础：ElementUI的表单
jayLog的博客
02-11 7847
整理了ElementUI的表单组件的知识点，以及他在vue中的使用
Vue+Element ui管理系统学习笔记
06-16
### Vue+Element UI管理系统学习笔记知识点详解 #### 技术栈概述 本学习笔记主要记录了基于Vue结合Element UI框架构建管理系统的过程与经验分享。Vue作为前端开发领域中备受推崇的JavaScript框架之一，以其轻量级、...
vue-element-admin-master
11-20
"vue-element-admin-master" 是一个基于 Vue.js 和 ...通过学习和实践 "vue-element-admin-master"，开发者不仅可以掌握 Vue.js 和 Element UI 的基本用法，还能了解如何构建完整的后台管理系统，提升前端开发能力。
jQuery学习笔记
06-23
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
偌依框架的使用学习笔记
最新发布
07-08
### 偌依框架的使用学习笔记 #### 一、若依框架的介绍与说明 若依框架是一款基于Spring Boot、Spring Security、JWT、Vue和Element的全开源快速开发平台，旨在提供高效的前后端分离解决方案。它具备以下特点： 1....
基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
基于element-ui 的form表单实现的一个高拓展性的表格布局组件，能够用于日常使用表单的布局实现。
vueelementui动态表单
08-12
vue-element-ui动态表单
【Element进阶】4、Element UI 复杂表单处理
weixin_52938153的博客
05-24 1090
Element UI 是一个基于 Vue 2.0 的桌面端组件库，提供了一套丰富的 UI 组件，帮助开发者快速构建美观、高效的用户界面。我们的【Element进阶】系列教程旨在深入探索 Element UI 的高级特性和实际应用。从国际化配置到与 Vue Router 和 Vuex 的结合，从复杂表单处理到自定义组件集成，再到高阶数据展示和性能优化，我们将通过具体案例和最佳实践，帮助开发者全面掌握 Element UI 的使用技巧，提升项目开发效率。
【Element入门】3、Element UI 表单组件详解
weixin_52938153的博客
05-22 2009
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
宽度 表单_如何使用Elementor的联系表单功能
weixin_36151775的博客
01-09 587
同学们做外贸独立站的目的我猜都是为了转化客户获得询盘，那么当访客在浏览了你的网站页面内容，对你的产品或者服务很感兴趣，想要进一步和你们沟通的时候。那么问题就来了—客户用什么样的方式能够直接的联系到你们？！最简单的办法就是在线沟通功能，Elementor编辑器没有提供在线沟通功能，所以这里不展开这方面的内容。其次就是询盘表单功能，通过网站上预设的联系表单，客户会提交他们的姓名、邮箱和其他相关信息，然...
ElementUI Form：Form表单
ChinaDragon10的博客
02-01 1407
https://editor.csdn.net/md?not_checkout=1&spm=1001.2101.3001.5352&articleId=135977718
element-ui 动态表单
haluodepaopao的博客
10-29 1402
动态表单
vue+element UI 学习总结笔记(一)
wh_xia_jun的专栏
09-05 4829
关键词: Webpack vue-cli Axios vuex router login vue+element UI 学习总结 Webpack: WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 开发环境的启动.........
element-ui之表单
多看多听多总结
07-24 680
element-ui之表单
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值