当前位置：首页 > article >正文

ElementUI的常用组件及使用技巧

article 2025/2/11 2:04:16

1. 引言

项目背景与目标

随着前端技术的快速发展，构建高效、美观的用户界面变得越来越重要。ElementUI作为一款基于Vue.js的组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的Web应用。本文旨在介绍ElementUI的常用组件及其使用技巧，帮助开发者更好地利用ElementUI提升开发效率。

ElementUI简介

ElementUI是饿了么团队推出的一个基于Vue.js 2.0的桌面端组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的Web应用。

选择ElementUI的原因

丰富的组件库：提供了丰富的组件，满足各种开发需求。
良好的文档支持：详细的文档和示例代码，便于学习和使用。
活跃的社区支持：活跃的社区和丰富的资源，帮助开发者解决问题。
与Vue.js的完美结合：基于Vue.js 2.0，易于集成和使用。

2. ElementUI简介

什么是ElementUI

ElementUI是饿了么团队推出的一个基于Vue.js 2.0的桌面端组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的Web应用。

主要特性

丰富的组件库：提供了丰富的组件，满足各种开发需求。
良好的文档支持：详细的文档和示例代码，便于学习和使用。
活跃的社区支持：活跃的社区和丰富的资源，帮助开发者解决问题。
与Vue.js的完美结合：基于Vue.js 2.0，易于集成和使用。

生态系统概览

ElementUI生态系统包括：

组件库：丰富的组件库，满足各种开发需求。
文档：详细的文档和示例代码，便于学习和使用。
社区：活跃的社区和丰富的资源，帮助开发者解决问题。
工具：各种工具和插件，提升开发效率。

3. 安装与配置

安装ElementUI

通过npm或yarn安装ElementUI：

npm install element-ui --save

或

yarn add element-ui

引入ElementUI

在Vue项目中引入ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

配置主题与语言

配置主题和语言：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en';
import App from './App.vue';

Vue.use(ElementUI, {
    locale });

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

4. 常用组件详解

4.1 按钮（Button）

基本用法

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

不同类型的按钮

<template>
  <div>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </div>
</template>

按钮组

<template>
  <el-button-group>
    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </el-button-group>
</template>

4.2 表单（Form）

基本用法

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <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>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      form: {
     
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
     
    onSubmit() {
     
      console.log('submit!');
    }
  }
}
</script>

表单验证

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质" prop="type">
      <el-checkbox-group v-model="ruleForm.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="特殊资源" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="线上品牌商赞助"></el-radio>
        <el-radio label="线下场地免费"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      ruleForm: {
     
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
     
        name: [
          {
      required: true, message: '请输入活动名称', trigger: 'blur' },
          {
      min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          {
      required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          {
      type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          {
      type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          {
      type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          {
      required: true, message: '请选择特殊资源', trigger: 'change' }
        ],
        desc: [
          {
      required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  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>

动态表单

<template>
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
    <el-form-item
      prop="email"
      label="邮箱"
      :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]"
    >
      <el-input v-model="dynamicValidateForm.email"></el-input>
    </el-form-item>
    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :label="'域名' + index"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
      :rules="{
        required: true, message: '域名不能为空', trigger: 'blur'
      }"
    >
      <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="addDomain">新增域名</el-button>
      <el-button type="primary" @click