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 的教程、博客或视频教程来学习更多的内容。