Element-UI

Element-UI

一、使用教程

Element-UI的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库

官网地址：https://element.eleme.cn/#/zh-CN

安装

基于命令行方式手动安装

1、安装依赖包 npm i element-ui -S

npm i element-ui -S

2、导入 Element-UI 相关资源

// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置Vue插件
Vue.use(ElementUI);

基于图形化界面自动安装

• 1、运行 vue ui 命令，打开图形化页面
• 2、通过 Vue 项目管理器，进入具体的项目配置面板
• 3、点击 插件 -> 添加插件，进入插件查询面板
• 4、搜索 vue-cli-plugin-element 并安装
• 5、配置插件，实现按需导入，从而减少打包后项目的体积

按需导入

在实际项目开发中，根据实际情况按需导入使用到的模块，减少打包后项目的体积。

import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Input
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

二、常见问题

element的级联选择器Cascader超出屏幕现象

原因：版本不一致造成的。

// 在全局的global.css样式中给el-cascader-panel添加高度
.el-cascader-panel{
    height: 200px;
}

默认样式修改不成功

使用less的深度选择器修改

.[parent-class] {
  /deep/ .el-input__inner {
    // 样式覆盖
  }
}

表格多选按钮是否禁用

添加 :selectable="selectable"

<el-table-column
  type="selection"
  header-align="center"
  align="center"
  :selectable="selectable"
  width="50">
</el-table-column>

methods中设置判断规则

/* 弹框多选判断是否显示多选 */
selectable (row,index) {
  /* 根据已退金额来判断是否可以退款多选 */
  if(row.refund_Amount==0) {
    return true
  } else {
    return false
  }
},

表单横向排列

<el-form :inline="true"></el-form>