ElementUI介绍 & 表单form & 表格table

官方文档

  • vue2的element-ui官网:Element - The world's most popular Vue UI framework
  • vue3的element-ui官网:一个 Vue 3 UI 框架 | Element Plus

1. 安装导入

1.1 npm 安装

npm i element-ui -S

  • -S: 是--save的简写,表示 这个包是生产依赖, 表示项目上线也要使用这个包。
  • -S: 是可以省略不写的。
  • 如果要安装开发依赖,则要加 -D。

1.2 导入

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//完整引入 ElementUI
//(1)导包
import ElementUI from 'element-ui'
//(2)导入css样式
import 'element-ui/lib/theme-chalk/index.css'
//(3)注册所有组件
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

2. 组件使用

2.1 表格组件el-table

  • 官方文档:Element - The world's most popular Vue UI framework
  1. 行(data),决定表格的数据。它是数组,数组中的每一个元素是一个对象,表示一行。
  2. 列,决定表格结构。 列由el-table-column决定,下面有三个属性需要掌握
    • label:决定当前列显示出的标题 (相当于表头)
    • prop:决定当前列数据的来源。对于表格来说, 它的数据是一个数组,每一个元素是一个对象,这里的prop值就是这个对象中的属性名。

prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

  1. width: 用来设置列的宽度。如果不设置,它会自适应。

示例:

ElementUI介绍 & 表单form & 表格table_第1张图片

scope: 子组件插槽传递的数据集合的对象

scope.row 在scope下面, 一般是代表:data数组中的当前项数据

scope.$index 当前数据在:data数组中的下标

2.2 表单组件el-form

Element - The world's most popular Vue UI framework

  • 1.表单中的数据项一般会用一个对象包起来
  • 2.属性名一般和后端接口中保持一致
  • 3.在元素上采用v-model双向绑定 不然无法输入
  • 4.绑定事件,通过双向绑定获取表单输入值

表单校验

  • 表单校验分为三个步骤
  • 1.在data()中定义校验规则
  • 2.在模板上配置对应规则(三个配置)
    • 给表单设置 rules 属性传入验证规则, 每个字段的验证规则是数组, 里面可以写多个规则
    • 给表单设置model属性传入表单数据
    • 给表单项(form-Item )设置 prop 属性,其值为设置为需校验的字段名
  • 3.处理最终校验结果(是否每一个表单全部校验通过)
    • 给表单按钮注册点击事件 事件函数里面通过ref属性找到源组件实例 调用下面两种方法
    • validate( ) elment-ui封装好的用于对整个表单进行验证 返回boolean
    • resetFields( ) elment-ui封装好的用于对整个表单进行初始化



                    
                    

你可能感兴趣的:(elementui,vue.js,javascript)