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: 用来设置列的宽度。如果不设置，它会自适应。

示例:

<template>
  <div>
  	// :data 获取的数据 必须是数组
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="生日" prop="date"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="性别">
  			// 这里用插槽就是自定义列数据 所以column的prop写不写都会被插槽替代
        <template v-slot="scope">
          <span>{{ scope.row.gender ? '女' : '男' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像">
        <template v-slot="scope">
          <span>
            <img width="80px" :src="scope.row.icon" />
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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封装好的用于对整个表单进行初始化

<template>
  <div>
    <el-form
      style="width: 360px"
      label-position="left"
      label-width="80px"
      :model="formData"  //表单校验所需属性
      :rules="formDataRules" //表单校验所需属性
      ref="formDataRef" //在form表单提交点击事件中 表单校验所需属性
    >
      <!-- 1.输入用户名 -->
      <el-form-item label="用户名" prop="username"> //表单校验所需属性 prop
        <el-input placeholder="请输入用户名" v-model="formData.username"></el-input>
      </el-form-item>
      <!-- 2.输入密码 -->
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请输入密码" v-model="formData.password"></el-input>
      </el-form-item>
      <!-- 3.确认密码 -->
      <el-form-item label="确认密码" prop="repassword">
        <el-input placeholder="请输入确认密码" v-model="formData.repassword"></el-input>
      </el-form-item>
      <!-- 4.注册+重置按钮 -->
      <el-form-item>
        <el-button type="primary" round @click="doRegister">注册</el-button>
        <el-button type="warning" round @click="doReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'user-page',
  data() {
    return {
      // 表单数据
      formData: {
        username: '',
        password: '',
        repassword: ''
      },
      // 表单校验规则
      formDataRules: {
				// 每个字段的验证规则是数组,里面可以写多个规则
        username: [
          {
						// 非空验证
            required: true,
            message: '请输入用户名',
						// 触发方式  还有change 一般用blur
            trigger: 'blur'
          },
          {
						// 正则
            pattern: /^w{6,15}$/,
            message: '请输入不少于6位的用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            pattern: /^w{6,15}$/,
            message: '请输入不少于6位的密码',
            trigger: 'blur'
          }
        ],
        repassword: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            pattern: /^w{6,15}$/,
            message: '请输入不少于6位的确认密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    doRegister() {
      // 注册前校验  校验不通过则为false
      this.$refs.formDataRef.validate(valid => {
        console.log(valid)
        if (valid) {
          // 如果校验通过执行以下代码
          // xxx
        }
      })
    },
    doReset() {
      // 表单重置  清除表单校验状态,并重置表单到初始状态
      // 恢复初始状态不是清空  比如data中的username假如初始值不是空值,就会恢复到这个初始值
      this.$refs.formDataRef.resetFields()
    }
  }
}

代码007普通

打赏 收藏 海报 链接