Vue Element前端应用开发之常规Element界面组件

下面我将为你详细讲解Vue Element前端应用开发之常规Element界面组件的完整攻略。

什么是Element UI组件库？

Element UI是一个基于Vue.js开发的组件库，具有丰富的UI组件和交互行为，适用于快速开发，提供了一组优雅、高效的基础组件，极大地减轻了开发人员的工作量。

安装Element UI

安装Element UI的方式有以下两种：

使用npm安装

npm i element-ui -S

使用CDN引入

<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

使用Element UI

在Vue.js中使用Element UI很简单，我们只需要按照以下步骤进行操作即可：

引入Element UI组件库和Vue.js

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

在Vue组件的template中使用Element UI的组件

<template>
  <div>
    <el-button>这是一个按钮</el-button>
    <el-input v-model="message"></el-input>
  </div>
</template>

在Vue组件中引入Element UI的样式

<style>
  @import "//unpkg.com/element-ui/lib/theme-chalk/index.css";
</style>

常用的Element UI组件

按钮（el-button）

el-button用于触发一个操作，例如提交表单。

<template>
  <el-button>提交</el-button>
</template>

表单（el-form）

el-form用于处理表单的收集和验证。

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 500px;">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'FormDemo',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('提交成功。');
        } else {
          alert('表单验证失败。');
          return false;
        }
      });
    }
  }
};
</script>

在上面的例子中，我们使用了el-form和el-form-item组件来创建一个简单的表单，并且使用了规则来验证输入。

表格（el-table）

el-table用于展示数据并且支持排序、筛选、分页等功能。

<template>
  <div>
    <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column label="日期" prop="date" sortable :sort-method="() => -1" width="180"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'TableDemo',
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: 'Jack', address: '北京市朝阳区' },
        { date: '2021-01-02', name: 'Rose', address: '上海市浦东区' },
        { date: '2021-01-03', name: 'Tom', address: '广州市天河区' },
        { date: '2021-01-04', name: 'Jerry', address: '深圳市福田区' }
      ]
    };
  }
};
</script>

在上面的例子中，我们使用了el-table和el-table-column组件来创建一个简单的表格，并且开启了默认的排序功能。