elementui实例

以下是关于 Element UI 实例的整理内容，涵盖常见组件用法和实际开发中的关键点：

安装与基础配置

通过 npm 安装 Element UI：

npm install element-ui -S

在 main.js 中全局引入：

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

Vue.use(ElementUI)

表单组件实例

典型表单结构包含验证规则：

<el-form :model="form" :rules="rules" ref="formRef">
  <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>

验证规则定义：

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
  ]
}

表格组件实例

支持分页和自定义列：

<el-table :data="tableData" border>
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column label="操作">
    <template #default="scope">
      <el-button @click="handleEdit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>
<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="10"
  layout="total, prev, pager, next"
  :total="total">
</el-pagination>

消息提示实例

全局方法调用示例：

// 成功提示
this.$message.success('操作成功')
// 错误提示
this.$message.error('操作失败')
// 确认对话框
this.$confirm('确认删除?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({ type: 'success', message: '删除成功' })
})

主题定制方法

通过 SCSS 变量覆盖修改主题色：

/* 在项目样式文件中 */
@import "~element-ui/packages/theme-chalk/src/index";

/* 改变主题色变量 */
$--color-primary: #ff4500;

/* 引入组件样式 */
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/input";

按需引入配置

借助 babel-plugin-component 优化体积：

// babel.config.js
module.exports = {
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

组件局部注册示例：

import { Button, Select } from 'element-ui'

export default {
  components: {
    'el-button': Button,
    'el-select': Select
  }
}