Vue2.0 UI框架ElementUI使用方法详解

什么是ElementUI？

ElementUI是一套基于Vue.js 2.0的桌面端组件库。它是在饿了么前端团队研发过程中产生的，并且一直得到了广泛的应用和维护，目前为止已经有29000+个星标和8500+个fork，成为了Vue.js社区中最受欢迎的组件库。

如何安装ElementUI？

你可以使用npm安装ElementUI:

npm install element-ui --save

如何使用ElementUI？

在你的Vue应用中，你需要在main.js中引入ElementUI并将其注册为Vue的插件。

import Vue from 'vue';
import ElementUI from 'element-ui';

import App from './App.vue';

Vue.use(ElementUI);

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

安装完后，你就可以在Vue组件中使用ElementUI的各种组件了。

举例来说，如果你想使用一个按钮组件，你可以这样写：

<el-button>Click me!</el-button>

ElementUI的文档中提供了详细的组件使用说明，你可以前往ElementUI官方文档查看。

示例1：使用ElementUI的表单组件

ElementUI提供了各种表单组件，让你可以方便地构建复杂的表单。

在下面的示例中，我们将使用ElementUI的表单组件来构建一个简单的登录表单。

<template>
  <div>
    <h1>登录</h1>
    <el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="80px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

在Vue组件中，我们需要定义表单的数据、校验规则和表单提交方法。

<script>
  export default {
    name: 'LoginForm',
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
        },
        loginRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('submit success');
          } else {
            console.log('submit fail');
            return false;
          }
        });
      },
    },
  };
</script>

完成之后，你就可以使用这个表单组件了。

示例2：使用ElementUI的表格组件

ElementUI提供了各种表格组件，让你可以方便地显示大量数据。

在下面的示例中，我们将使用ElementUI的表格组件来展示一个简单的数据表。

<template>
  <div>
    <h1>学生成绩表</h1>
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="语文" prop="chinese"></el-table-column>
      <el-table-column label="数学" prop="math"></el-table-column>
      <el-table-column label="英语" prop="english"></el-table-column>
      <el-table-column label="总分" prop="total"></el-table-column>
      <el-table-column label="平均分" prop="average"></el-table-column>
    </el-table>
  </div>
</template>

在Vue组件中，我们需要定义表格数据。

<script>
  export default {
    name: 'TableDemo',
    data() {
      return {
        tableData: [
          { name: 'Alice', chinese: 90, math: 85, english: 95 },
          { name: 'Bob', chinese: 70, math: 67, english: 82 },
          { name: 'Charlie', chinese: 88, math: 92, english: 87 },
          { name: 'Dave', chinese: 79, math: 85, english: 95 },
        ],
      };
    },
  };
</script>

完成之后，你就可以使用这个表格组件了。

总结

本文介绍了Vue2.0 UI框架ElementUI的安装和基本使用方法，以及两个使用示例：表单组件和表格组件。

ElementUI拥有丰富的组件库，包括但不限于按钮、表单、表格、对话框、下拉菜单等。它可以大大提高你的开发效率，同时也免去了手写CSS的烦恼。早在我们的学习Vue的时候，就可以关注ElementUI。