Element-UI快速入门

作者介绍：✌️大厂全栈码农|毕设实战开发，专注于大学生项目实战开发、讲解和毕业答疑辅导。

 推荐订阅精彩专栏 👇🏻 避免错过下次更新

Springboot项目精选实战案例

更多项目：CSDN主页YAML墨韵

学如逆水行舟，不进则退。学习如赶路，不能慢一步。

目录

1. 安装 Element-UI

3. 使用组件

3.1. Element-UI 的按钮组件

3.2. Element-UI 的表格组件

表格特性

3.3. Element-UI 的分页组件

3.4. Element-UI 的表单组件

3.5. Element-UI 的组件头像上传

4. 查看官方文档

5. 深入学习

---

Element-UI 是一个基于 Vue.js 的高质量 UI 组件库，它提供了一系列丰富的组件，帮助开发者快速构建出美观、易用且功能丰富的页面。以下是 Element-UI 的快速入门指南：

1. 安装 Element-UI

首先，你需要在你的 Vue.js 项目中引入 Element-UI。这通常通过 npm 或 yarn 进行安装：

npm i element-ui -S  
# 或者  
yarn add element-ui

2. 引入 Element-UI

然后，在你的 main.js 文件中引入 Element-UI 和它的样式文件：

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

3. 使用组件

进入官网Element官网选择组件复制样式表链接标签

3.1. Element-UI 的按钮组件

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

3.2. Element-UI 的表格组件

<template>  
  <div>  
    <el-table  
      :data="tableData"  
      style="width: 100%">  
      <el-table-column  
        prop="date"  
        label="日期"  
        width="180">  
      </el-table-column>  
      <el-table-column  
        prop="name"  
        label="姓名"  
        width="180">  
      </el-table-column>  
      <el-table-column  
        prop="address"  
        label="地址">  
      </el-table-column>  
    </el-table>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [{  
        date: '2016-05-02',  
        name: '王小虎',  
        address: '上海市普陀区金沙江路 1518 弄'  
      }, {  
        date: '2016-05-04',  
        name: '王小鹿',  
        address: '上海市普陀区金沙江路 1517 弄'  
      }, // ...更多数据  
      ]  
    }  
  }  
}  
</script>

表格特性

• 数据绑定：使用 :data 属性绑定你的表格数据。
• 列定义：使用 <el-table-column> 标签定义表格的列，并使用 prop 属性指定数据中的字段名，label 属性指定列的标题。
• 列宽：你可以使用 width 属性来设置列的宽度。
• 其他特性：Element-UI 的表格组件还支持很多其他特性，如排序、筛选、自定义渲染等。你可以查看 Element-UI 的官方文档来了解更多。

3.3. Element-UI 的分页组件

在 Vue 中使用 Element-UI 的分页组件时，如果你想要给分页组件添加一个背景色，你可以通过自定义 CSS 来实现。Element-UI 的分页组件默认并没有提供直接设置背景色的属性，但你可以通过覆盖其默认样式来达到你的需求。

1. 确定分页组件的类名：
   首先，你需要知道 Element-UI 分页组件的类名。你可以通过浏览器的开发者工具来查看这个类名。对于 Element-UI 的分页组件，它通常会有一个类似 .el-pager 的类名。

2. 编写自定义 CSS：
   在你的 Vue 组件的 <style> 标签中，或者在一个单独的 CSS 文件中，编写自定义的 CSS 来覆盖默认样式。你可以使用 background-color 属性来设置背景色。

3. 确保 CSS 的优先级：
   如果你发现自定义的 CSS 没有生效，可能是因为它的优先级不够高。你可以通过增加选择器的特异性，或者使用 !important 关键字来确保你的样式生效。但是要注意，过度使用 !important 可能会导致样式管理变得困难，所以最好先尝试通过调整选择器的特异性来解决问题。

<template>  
  <div>  
    <!-- 其他内容 -->  
  
    <el-pagination  
      @size-change="handleSizeChange"  
      @current-change="handleCurrentChange"  
      :current-page="currentPage"  
      :page-sizes="[10, 20, 30, 40]"  
      :page-size="pageSize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="total">  
    </el-pagination>  
  </div>  
</template>  
  
<script>  
// ... 你的 Vue 组件逻辑  
</script>  
  
<style scoped>  
/* 使用 scoped 属性确保这些样式只应用于当前组件 */  
.el-pagination {  
  background-color: #f0f0f0; /* 设置背景色 */  
  /* 其他样式 */  
}  
  
/* 如果需要更具体的选择器，可以使用子类的类名，比如 .el-pager__item */  
</style>

3.4. Element-UI 的表单组件

在 Vue 中使用 Element-UI 的表单组件可以方便地创建和管理表单。Element-UI 提供了一系列的表单项组件，如输入框（Input）、选择框（Select）、开关（Switch）等，这些组件可以组合在一起形成一个完整的表单。

以下是一个使用 Element-UI 表单组件的基本示例：

<template>  
  <el-form :model="form" :rules="rules" ref="form" label-width="120px">  
    <el-form-item label="用户名" prop="username">  
      <el-input v-model="form.username"></el-input>  
    </el-form-item>  
    <el-form-item label="密码" prop="password">  
      <el-input type="password" v-model="form.password"></el-input>  
    </el-form-item>  
    <el-form-item label="邮箱" prop="email">  
      <el-input v-model="form.email"></el-input>  
    </el-form-item>  
    <el-form-item>  
      <el-button type="primary" @click="submitForm('form')">提交</el-button>  
      <el-button @click="resetForm('form')">重置</el-button>  
    </el-form-item>  
  </el-form>  
</template>  
  
<script>  
export default {  
  data() {  
    var validateEmail = (rule, value, callback) => {  
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  
      if (value === '') {  
        callback(new Error('请输入邮箱地址'));  
      } else if (!re.test(String(value).toLowerCase())) {  
        callback(new Error('请输入正确的邮箱地址'));  
      } else {  
        callback();  
      }  
    };  
    return {  
      form: {  
        username: '',  
        password: '',  
        email: ''  
      },  
      rules: {  
        username: [  
          { required: true, message: '请输入用户名', trigger: 'blur' }  
        ],  
        password: [  
          { required: true, message: '请输入密码', trigger: 'blur' }  
        ],  
        email: [  
          { required: true, validator: validateEmail, 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>

在上面的示例中，我们创建了一个包含用户名、密码和邮箱地址的表单。

• :model="form" 绑定了一个名为 form 的对象，这个对象包含了表单中所有字段的初始值。
• :rules="rules" 绑定了一个名为 rules 的对象，这个对象定义了表单验证的规则。
• ref="form" 为表单设置了一个引用名，以便在 Vue 实例的方法中通过 this.$refs.form 访问它。
• <el-form-item> 是表单项的容器，用于包裹具体的表单项组件，如 <el-input>。
• prop 属性用于指定表单项对应的字段名，以便进行表单验证。
• v-model 指令用于实现表单项和 Vue 实例中数据的双向绑定。
• submitForm 方法用于处理表单提交事件，它首先调用 this.$refs[formName].validate() 方法进行表单验证，然后根据验证结果执行相应的操作。
• resetForm 方法用于重置表单字段的值，它调用了 this.$refs[formName].resetFields() 方法。

3.5. Element-UI 的组件头像上传

<template>  
  <div>  
    <el-upload  
      class="avatar-uploader"  
      action="/your-upload-url"  
      :show-file-list="false"  
      :on-success="handleSuccess"  
      :on-error="handleError"  
      :before-upload="beforeUpload"  
    >  
      <img v-if="imageUrl" :src="imageUrl" class="avatar">  
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>  
    </el-upload>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      imageUrl: '', // 头像图片的 URL  
    };  
  },  
  methods: {  
    handleSuccess(response, file, fileList) {  
      // 上传成功后的处理逻辑  
      // 假设服务器返回了一个包含图片 URL 的对象  
      this.imageUrl = response.data.url;  
    },  
    handleError(err, file, fileList) {  
      // 上传失败后的处理逻辑  
      console.log(err);  
    },  
    beforeUpload(file) {  
      // 在上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传  
      const isJPG = file.type === 'image/jpeg';  
      const isLt2M = file.size / 1024 / 1024 < 2;  
  
      if (!isJPG) {  
        this.$message.error('上传头像图片只能是 JPG 格式!');  
      }  
      if (!isLt2M) {  
        this.$message.error('上传头像图片大小不能超过 2MB!');  
      }  
      return isJPG && isLt2M;  
    },  
  },  
};  
</script>  
  
<style scoped>  
.avatar-uploader .el-upload {  
  border: 1px dashed #d9d9d9;  
  border-radius: 6px;  
  cursor: pointer;  
  position: relative;  
  overflow: hidden;  
}  
.avatar-uploader .el-upload:hover {  
  border-color: #409EFF;  
}  
.avatar-uploader img {  
  width: 100%;  
  height: 100%;  
  border-radius: 6px;  
}  
.avatar-uploader-icon {  
  font-size: 28px;  
  color: #8c939d;  
  width: 100px;  
  height: 100px;  
  line-height: 100px;  
  text-align: center;  
  border-radius: 6px;  
  background-color: #f5f7fa;  
}  
</style>

4. 查看官方文档

Element-UI 的官方文档提供了详细的使用说明和演示示例。你可以通过访问 Element-UI 的官网，在顶部导航栏中点击“文档”按钮，进入官方文档页面。在文档页面中，你可以通过左侧的导航栏浏览各种组件的文档说明和示例代码，也可以使用右上角的搜索框快速查找相关文档。

5. 深入学习

如果你需要更深入地了解 Element-UI 的使用和定制方法，可以参考官方提供的进阶教程和 API 文档。这些文档提供了更详细和专业的技术说明和参考。此外，你也可以在网络上搜索 Element-UI 的教程、博客或视频教程来学习更多的内容。