element ui菜鸟教程：Element UI菜鸟教程，从零开始手把手教你使用Element UI框架

来源：网络作者：日期：2025-10-15 21:43:37

环境准备

在开始使用Element UI之前，我们需要先搭建一个Vue项目，并安装Element UI。

安装Vue CLI 如果你还没有安装Vue CLI,可以通过以下命令安装：
```
npm install -g @vue/cli
```
创建Vue项目 使用Vue CLI创建一个新项目：
```
vue create my-project
```
选择默认配置即可。
安装Element UI 进入项目目录，安装Element UI：
```
cd my-project
npm install element-ui --save
```

引入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)

基础组件使用

Element UI提供了丰富的组件,下面是一些常用组件的使用示例。

按钮（Button）

按钮是UI中最基础的组件之一，Element UI提供了多种样式和事件处理。

element ui菜鸟教程：Element UI菜鸟教程，从零开始手把手教你使用Element UI框架

<template>
  <el-button type="primary" @click="handleClick">点击我</el-button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$message.success('按钮点击成功！')
    }
  }
}
</script>

表单（Form）

表单组件用于收集用户输入，Element UI提供了表单验证功能。

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功！');
        } else {
          this.$message.error('请正确填写表单！');
          return false;
        }
      });
    }
  }
}
</script>

表格（Table）

表格组件用于展示数据，支持排序、筛选和分页。

<template>
  <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 style="margin-top: 20px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟数据请求
      this.tableData = Array.from({length: this.pageSize}, (_, i) => ({
        date: `2023-${(i + this.currentPage * this.pageSize - 1000).toString().slice(-2)}`,
        name: `用户${i + 1}`,
        address: `地址${i + 1}`
      }));
      this.total = 100; // 总数据量
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
}
</script>

自定义主题

Element UI支持自定义主题，你可以修改颜色、字体等样式。

下载主题模板 访问Element UI官网下载主题模板。
修改主题配置 在src目录下创建theme文件夹，将下载的theme.src.css文件修改为你需要的配置。

编译主题 使用Node.js编译主题：

npm install -g stylelint
npm install -g postcss-cli autoprefixer
npm run theme

引入自定义主题 将编译后的theme.css文件引入到项目中：

import 'element-ui/lib/theme-chalk/index.css'
import '@/theme/theme.css'

实战案例：用户管理系统

下面是一个简单的用户管理系统的实现，包含用户列表、添加用户、编辑用户等功能。

<template>
  <div>
    <el-button type="primary" @click="addUser">添加用户</el-button>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 20, email: 'zhangsan@example.com' },
        { name: '李四', age: 25, email: 'lisi@example.com' }
      ],
      addUserDialogVisible: false,
      editUserDialogVisible: false,
      newUser: {},
      editUser: {}
    }
  },
  methods: {
    addUser() {
      this.newUser = { name: '', age: '', email: '' };
      this.addUserDialogVisible = true;
    },
    addUserSubmit() {
      this.users.push(this.newUser);
      this.addUserDialogVisible = false;
    },
    editUser(row) {
      this.editUser = row;
      this.editUserDialogVisible = true;
    },
    updateUser() {
      const index = this.users.findIndex(user => user.name === this.editUser.name);
      if (index !== -1) {
        this.users[index] = { ...this.editUser };
      }
      this.editUserDialogVisible = false;
    },
    deleteUser(row) {
      this.$confirm('确认删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.users = this.users.filter(user => user.name !== row.name);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

Element UI是一个功能强大且易于使用的UI框架，通过本教程，你应该已经掌握了其基本组件的使用方法，在实际开发中，你可以根据项目需求灵活组合这些组件，打造美观、高效的用户界面。

如果你对Element UI还不熟悉，建议多看官方文档，结合实际项目进行练习，逐步提升你的开发技能,祝你学习愉快！

分类：编程

地址：https://www.jinti.net/post/177191.html