目录
API:
https://elemefe.github.io/element-react/#/zh-CN/quick-start
安装:
npm i element-ui -S
引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
完整引入
在 main.js 中写入以下内容：
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)
});
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
},
]
]
}
实质添加:
presets: [
["@babel/preset-env", { "modules": false }],
],
plugins:[
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
import {
Button,
Row,
Col,
Form,
FormItem,
Input,
Message,
Dropdown,
DropdownMenu,
DropdownItem,
...
} from 'element-ui';
import router from './router';
import store from './store';
Vue.component(Button.name, Button);
Vue.use(Option);
Vue.use(Select);
Vue.use(Tag);
Vue.use(Row);
Vue.use(Col);
Vue.use(Form);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Dropdown);
Vue.use(Tag);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
new Vue({
el: '#app',
render: h => h(App)
});
在使用按需引入时有点小问题,有些模块需要使用不止一个引入,所以在实际引入前记得看下官网快速引入的表单,将相关的组件一次性导入
全局配置
在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
完整引入 Element：
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
按需引入 Element：
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
Loading 加载动画
import { Loading } from 'element-ui';
指令式:
配置好后只需要使用v-loading就可以加上加载动画,参数表示是否显示,true表示显示加载动画,false表示不显示加载动画
服务式:Loading.service({ fullscreen: true });
在拦截器中的配置如下
let LoadingView = Loading.service({ fullscreen: true ,text:'加载中...'});
instance.interceptors.request.use(
function (config) {
LoadingView ;
return config;
},
function (error) {
LoadingView.close();
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
function (response) {
LoadingView.close();
return response.data;
},
function (error) {
LoadingView.close();
return Promise.reject(error);
}
);
element-Ui级联选择器
<el-form>
<el-form-item label="权限">
<el-cascader
v-model="绑定的数据(数组类型):Array"
:options="绑定的选项:Options"
:props="{ multiple: true }" //决定是否可以多选
></el-cascader>
</el-form-item>
</el-form>
这是一个基本的框架,然后还需要对绑定了的数据进行一个初始化
可以直接绑定计算属性来设置级联选择器绑定的两个数据,但是在实际的使用中,因为计算属性在初次调用时数据未完成挂载,会返回一次空值,待到数据挂载完成后,产生变化才会再次调用计算方法,因此其实可以不依赖于计算属性,而是直接在mounted里调用方法对数据进行初始化
详细配置请前往官网查看
//绑定的选项:Options 的初始化方法
params() {
this.loading = true; //加载判断,不是这段代码的要点
//请求数据,并对返回的数据进行二次封装,使其满足 级联选择器的数据格式要求
this.$request.get(`/administrator_role/create`).then((res) => {
this.permissions = res.data.permissions;
//设置空数组,用来存放最终结果,并实现数组的整体赋值
let p = [];
//#region 据实际过程中返回的数据格式来设计的,并不适用于所有情况
for (let i in this.permissions) {
let children = [];
for (let j = 0; j < this.permissions[i].length; j++) {
children.push({
value: this.permissions[i][j].id,
label: this.permissions[i][j].display_name,
});
}
p.push({
value: i,
label: i,
children: children,
});
}
// #endregion 看到这请先到下面看 选项封装 模块
this.permissionsTransform = p;
this.getDetail();
});
},
getDetail() {
this.$request.get(`/administrator_role/${this.id}`).then((res) => {
this.user = res.data;
//在选项初始化以后,才开始绑定的数据的初始化
let selectedPermissions = [];
//#region 开始对初始化数据进行封装
res.data.permission_ids.forEach((item) => {
for (let i = 0; i < this.permissionsTransform.length; i++) {
for (let j = 0; j < this.permissionsTransform[i].children.length; j++) {
if (item === this.permissionsTransform[i].children[j].value) {
selectedPermissions.push([this.permissionsTransform[i].value, item]);
return;
}
}
}
});
//#endregion, 看到这请先到下面看 初始数据封装 模块
this.selectedPermissions = selectedPermissions;
// //加载判断,不是这段代码的要点
this.loading = false;
});
},
选项封装
返回数据格式样板:
[
VIP会员: [
0:{
display_name: "会员列表"
group_name: "VIP会员"
id: 35
slug: "role"
},
1:{
display_name: "会员添加"
group_name: "VIP会员"
id: 36
slug: "role.store"
},
2:{
display_name: "会员查看"
group_name: "VIP会员"
id: 37
slug: "role.edit"
}
],
优惠码:[
0:{
display_name: "优惠码列表
group_name: "优惠码"
id: 116
slug: ""promoCode""
},
1:{
display_name: "优惠码添加"
group_name: "优惠码"
id: 117
slug: "promoCode.store"
},
]
]
封装后数据格式样板:
[
{
label: "VIP会员",
value: "VIP会员",
children:[
{
label: "会员列表",
value: 35
},
{
label: "会员添加",
value: 36
},
{
label: "会员查看",
value: 37
},
]
},
{
label: "优惠码",
value: "优惠码",
children:[
{
label: "优惠码列表",
value: 116
},
{
label: "优惠码添加",
value: 117
},
]
}
]
实际上,在使用级联选择器时的工作就是将格数据的格式转化,
{
ladel:名称,
value:值,
children:子选单
}
但工作到这里还没有结束,因为这里只是做了选项的初始化,还没有对绑定数据进行初始化
绑定数据封装
返回绑定数据样板:
[
0: 35
1: 36
2: 37
3: 116
4: 117
]
封装绑定数据样板:
[
['VIP会员',35],
['VIP会员',36],
['VIP会员',37],
['优惠码',116],
['优惠码',117],
]
很明显的看到,最终要提供给级联选择器使用的数据格式是对应每个最小子选项而言,返回一个数组,里面是选项的value值,选项的辈分越大排的越前, 而级联选择器会将对应这个数组的label显示在页面上
标签：use,Vue,ElementUI,value,element,引入,import From： https://www.cnblogs.com/szfzb/p/16790216.html