elementui代码

以下是关于 Element UI 代码的常见使用方法和示例：

安装 Element UI

通过 npm 安装 Element UI：

npm install element-ui -S

或通过 CDN 引入：

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

基本使用

在 Vue 项目中全局引入 Element UI：

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

Vue.use(ElementUI);

组件示例

按钮组件

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>

表单组件

<el-form :model="form" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="form.password" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

表格组件

<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>

自定义主题

通过修改变量覆盖默认主题：

/* 在 SCSS 文件中覆盖主题变量 */
$--color-primary: #ff0000;

@import "~element-ui/packages/theme-chalk/src/index";

按需引入

使用 babel-plugin-component 按需引入组件：

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

Vue.use(Button);
Vue.use(Select);

国际化

设置 Element UI 的语言：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

以上代码示例涵盖了 Element UI 的基本用法，包括安装、组件使用、主题定制和国际化设置。根据项目需求选择合适的引入方式和使用方法。