vue element-ui 入门

1. element-ui 基本用法

全局安装 vue-cli
npm install -g @vue/cli
vue -V 查看当前版本
J:\vueCode\element-ui>vue -V
@vue/cli 4.5.4
创建 element-ui-test 项目
vue create element-ui-test
运行项目
npm run serve

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.104:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
image.png
安装 element-ui 依赖
npm i element-ui -S
src/main.js 加入Vue 插件,css 样式
import Vue from 'vue'
import App from './App.vue'

// element 组件
import ElementUI from 'element-ui'
// element 样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

// 阻止 vue 启动时生成生产提示
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')
修改 App.vue
<template>
  <div id="app">
    <!-- element-ui 按钮 -->
    <el-button @click="show">按钮</el-button>
  </div>
</template>

<script>

export default {
  name: 'app',
  methods:{
    show(){
      this.$message.success("element-ui 弹框")
    }
  }
}
</script>

<style>

</style>
npm run serve 运行效果
image.png

2. element-ui 按需加载

我们先对项目进行一个构件使用命令 npm run build
image.png

我们主要看 chunk-vendors.....js 库文件体积大概是 789 kb 还是挺大的，原因主要是现在的 element-ui 是全量打包的结果

按需加载
  • 1.安装 babel-plugin-component
npm install babel-plugin-component -D
修改 babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    [
      "component",{
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
修改 main.js
import Vue from 'vue'
import App from './App.vue'

/***************   全量引入  *****************/
// element 组件
// import ElementUI from 'element-ui'
// element 样式
//import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)


/***************   按需引入  *****************/
// 引入 button 插件
import {Button,Message} from 'element-ui'

// 引入组件  参数一 组件名称，  参数二 组件构造函数
Vue.component(Button.name,Button)
// message 不是组件引用 而是一个方法引用
// 在原型上增加一个 $message 方法 执行 Message
Vue.prototype.$message = Message

// 阻止 vue 启动时生成生产提示
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')
再次打包 npm run build 体积明显变小了 ,只有 112 KB
image.png

3. element-ui 插件引用

创建新的项目
vue create element-ui-test-1
这次我们不需要手动的引入 babel 插件 和 element-ui 按需引入，直接使用一个 element-ui 的插件
vue add elemnet
Fully import 完整引入，Import on demand 按需引入，暂时先选择 Fully import
image.png
是否要覆盖 elemnet-ui 中的有些默认样式变量，因为默认样式一改，整体的样式也会变更，这里先选择 N
image.png
语言版本选择第一个 中文
image.png

等待安装完后......

package.json 中已经引入了 element-ui
image.png
main.js 中也引入了一个文件 element.js
image.png
进入 element.js 中,其实也就是把之前的 element-ui 组件间引入进来了
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)
最后还替换了原来的 App.vue 文件在里面增加了一个 button ,简单来说就是对 element-ui 做了一个初始化
image.png
运行起来 npm run serve
image.png

这是页面中多了一个 element-ui 的 button 来告诉我们已经成功的将 element-ui 引入

4. 表单的基本用法

  1. el-form 容器，通过 model 绑定数据
  2. el-form-item，通过 label 绑定标签
  3. 表单组件通过 v-model 绑定 model 中的数据
修改 App.vue 文件
<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="上海"></el-option>
          <el-option label="城市二" value="北京"></el-option>
        </el-select>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

只是就完成一个最简单的表单，查看页面，点击查询可以看到响应的数据


image.png

5. 表单校验的基本用法

  1. 定义校验规则，可以绑定到 el-form 或 el-form-item
升级 App.vue 文件
<template>
  <div id="app">

    <!-- 通过 :rules="绑定到一个 rules 对象下进行校验逻辑 -->
    <!-- 通过绑定 ref 点击表单提交是触发校验 -->
    <el-form inline :model="data" :rules="rules" ref=form>
      <el-form-item label="审批人" prop="user">
        <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="上海"></el-option>
          <el-option label="城市二" value="北京"></el-option>
        </el-select>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    // 参数 1 校验规则
    // 参数 2 输入的值
    // callback 回掉方法
    const userValidator = (rule, value, callback) => {
      if(value.length > 3){
        // 表示通过
        callback()
      }else{
        callback(new Error('用户名长度必须大于3'))
      }
    }
    return {
      // 表单绑定的数据源
      data:{ user: '', region: ''},
      rules:{
        // user 和 el-form-item 里的 prop="user" 是对应的关系
         user:[
          // required: true 是必填
          // trigger: 'change' 在输入框变化时触发， blur 表示光标离开时触发
          // message 错误提示
          { required: true, trigger: 'change', message: '用户名必须录入' },
          
          // validator 手动校验，需要绑定到一个方法上
          { validator: userValidator, trigger: 'change'}
      ] }
    }
  },
  methods:{
    onSubmit(){
      console.log(this.data)
      // 参数 1 是否校验通过
      // 参数 2 具体错误信息
      this.$refs.form.validate((isValid,errors) => {
        console.info(isValid,errors)
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. 一种通过绑定 :rules 来对 change 或者 blur 时间进行监听

  2. 另一种通过 ref 绑定到 form 对象上，通过直接调用 el-form api 的 validate 方法来实现提交表单进行校验


    image.png

6. 表单校验的高级用法

用法一： 动态改变校验规则
image.png
  1. rules 只包含一个校验规则
  • 动态添加的校验规则默认会立即生效，可以通过 <el-form> 绑定属性 :validate-on-rule-change="false" 来改变不会立即生效
    <el-form 
      inline 
      :model="data" 
      :rules="rules" 
      ref="form"
      :validate-on-rule-change="false">
用法二：手动控制校验状态
  • validate-status：验证状态，枚举值，共四种：
    • success: 验证成功
    • error：验证失败
    • validaing：验证中
    • (空)：未验证
  • error：自定义错误提示
  1. 设置 el-form-item 属性

  • data 中定义两个属性

    • error: '', // 错误提示
    • status: '', // validate-status 状态

  • :validate-status="status" status 对应data 中的 status

  • :error="error" 对应 data 中的 error
    <el-form> 中定义属性 status-icon 表示每种状态提示的图标

  <el-form 
      inline 
      :model="data" 
      :rules="rules" 
      ref="form"
      :validate-on-rule-change="false"
      status-icon
      >
      <el-form-item 
        label="审批人" 
        prop="user"
        :validate-status="status"
        :error="error">
        <el-input v-model="data.user" placeholder="请输入审批人"></el-input>
      </el-form-item>
测试

成功


image.png

失败


image.png
  • 做一个自定义的错误提示，:validate-status="status" 中的 status 必须为 error，error 中可写自己的定义的错误提示
     // 自定义错误提示
      error: '这是自定义的错误提示', 
      // validate-status 状态
      status: 'error',
image.png
  • 自定义 status 和 error
    添加校验方法
    // 失败校验
    showError(){
      this.status = 'error'
      this.error = '用户名输入有误'
    },
    // 成功校验
    showSuccess(){
      this.status = 'success'
      this.error = ''
    },
    // 校验中
    showValidating(){
      this.status = 'validating'
      this.error = ''
    }

页面中增加校验按钮

        <el-button type="success" v-on:click="showSuccess">成功校验</el-button>
        <el-button type="danger" v-on:click="showError">失败校验</el-button>
        <el-button type="waring" v-on:click="showValidating">校验中</el-button>

点击成功校验


image.png

点击失败校验


image.png

点击校验中
image.png
完整示例
<template>
  <div id="app">

    <!-- 通过 :rules="绑定到一个 rules 对象下进行校验逻辑 -->
    <!-- 通过绑定 ref 点击表单提交是触发校验 -->
    <!-- 
        :validate-on-rule-change 默认 为 true 动态添加立即生效，
        false 不会立即生效
     -->
    <el-form 
      inline 
      :model="data" 
      :rules="rules" 
      ref="form"
      :validate-on-rule-change="false"
      status-icon
      >
      <el-form-item 
        label="审批人" 
        prop="user"
        :validate-status="status"
        :error="error">
        <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="上海"></el-option>
          <el-option label="城市二" value="北京"></el-option>
        </el-select>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit">查询</el-button>
        <el-button type="primary" v-on:click="addRule">添加校验规则</el-button>
        <el-button type="success" v-on:click="showSuccess">成功校验</el-button>
        <el-button type="danger" v-on:click="showError">失败校验</el-button>
        <el-button type="waring" v-on:click="showValidating">校验中</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return {
      // 错误提示
      error: '', 
      // validate-status 状态
      status: '',

      /* 自定义错误提示 status 必须是 error */ 
      // 错误提示
      //error: '这是自定义的错误提示', 
      // validate-status 状态
      //status: 'error',

      // 表单绑定的数据源
      data:{ user: '', region: ''},
      rules:{
        // user 和 el-form-item 里的 prop="user" 是对应的关系
         user:[
          // required: true 是必填
          // trigger: 'change' 在输入框变化时触发， blur 表示光标离开时触发
          // message 错误提示
          { required: true, trigger: 'change', message: '用户名必须录入' }
      ] }
    }
  },
  methods:{
    onSubmit(){
      console.log(this.data)
      // 参数 1 是否校验通过
      // 参数 2 具体错误信息
      this.$refs.form.validate((isValid,errors) => {
        console.info(isValid,errors)
      })
    },
    // 动态添加校验规则
    addRule(){

      // 参数 1 校验规则
      // 参数 2 输入的值
      // callback 回掉方法
      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'}
      ]

      // 通过 Object.assign 方法生成一个新的对象赋值给 rules  
      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>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7. 表单常见属性解析

  • label-position: 标签位置，枚举值，left 和 top
  • label-width: 标签宽度
  • label-suffix: 标签后缀
  • inline: 行内标签
  • disabled: 设置整个 form 中的表单组件全部 disabled ,优先级低于表单组件自身的 disabled
  1. label-postion 决定 label 标签的位置，使用这个属性的时候 inline 属性要置为 false, 我们先给 <el-form> 加上两个属性
    <el-form 
      style="width:500px"
      label-width="100px"

<el-select> 也加上一个宽度让他为 100%

<el-select v-model="data.region" placeholder="城市" style="width:100%">

先注释掉校验的按钮，最后效果


image.png

测试 label-position
比如 label-position="top"，label 就会批量的到达顶部

image.png

默认值是 label-position="left"

测试 label-suffix
比如要在每一个 label 后面加一个冒号，可以使用

label-suffix=":"

image.png

测试 disabled

disabled

加上 disabled 属性会使整个表单都是 disabled 状态

image.png

通过设置 <el-form :hide-required-asterisk="true"> 是否显示校验标签 label 前面的红色 * 号 false 显示 true 不显示，默认显示，为 false

  • 使用 size 属性这是表单元素的尺寸
    比如设置
size="small"
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345