element ui语法

Element UI是一套基于Vue.js 2.0 的桌面端组件库，以下介绍一些常见的语法和使用方式：

安装与引入

安装：通过npm进行安装

bash 复制代码

npm install element-ui -S

全局引入：在main.js文件中引入Element UI并使用

javascript 复制代码

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });

按需引入：借助babel-plugin-component插件实现按需引入
首先安装插件：

bash 复制代码

npm install babel-plugin-component -D

然后在.babelrc中配置：

json 复制代码

{ "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

在组件中按需引入：

javascript 复制代码

import Vue from 'vue'; import { Button, Select } from 'element-ui'; import 'element-ui/lib/theme-chalk/button.css'; import 'element-ui/lib/theme-chalk/select.css'; Vue.component(Button.name, Button); Vue.component(Select.name, Select);

组件使用示例

按钮组件

html 复制代码

<template> <div> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> </div> </template> <script> export default { name: 'ButtonExample' }; </script>

表单组件

html 复制代码

<template> <div> <el-form :model="formData" ref="formRef"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { formData: { username: '', password: '' } }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { console.log('表单提交成功'); } else { console.log('表单验证失败'); } }); } } }; </script>

表格组件

html 复制代码

<template> <div> <el-table :data="tableData"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2023-01-01', name: '张三', address: '北京市朝阳区' }, { date: '2023-01-02', name: '李四', address: '上海市浦东新区' } ] }; } }; </script>

事件绑定

Element UI组件可以通过@符号绑定原生DOM事件或组件自定义事件。例如：

html 复制代码

<template> <div> <el-button @click="handleClick">点击我</el-button> </div> </template> <script> export default { methods: { handleClick() { console.log('按钮被点击了'); } } }; </script>

自定义指令

Element UI也支持自定义指令。例如创建一个自定义指令来改变元素的背景颜色：

javascript 复制代码

// main.js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.directive('bg-color', { inserted(el, binding) { el.style.backgroundColor = binding.value; } }); Vue.use(ElementUI); // 在组件中使用 <template> <div> <div v-bg-color="'red'">背景颜色为红色</div> </div> </template> <script> export default {