element-ui
element-ui 的下拉树
我了解到在 element-ui 中并没有下拉树这个组件，所以只能用<el-select> 组件和<el-tree> 结合来实现 1、html <script src="../resources/js/vue.js"></script> <script src="../resources/js/el ......
使用element-ui中的el-table回显已选中数据时toggleRowSelection报错
最近在写一个后台，需要在表格中多选，然后点击编辑按钮的时候，需要回显已经选中的表单项 <el-table v-loading="loading" :data="discountList" :row-key="(row) => row.id" ref='multipleTable' @selectio ......
关于element-ui中的el-drawer每弹出一次，其z-index就要自增1
最近在写一个vue的后台项目，用到了el-drawer，在el-drawer中还嵌套了el-dialog和el-table 然后有时候会发现内嵌的el-dialog会消失不见，就是第一次点击，正常弹出，第二次正常弹出，第三次就不见了，后来发现是被el-drawer盖住了。 于是开始找z-index的 ......
关于 Vue2.0 中 element-ui@2.15.7 中使用 vue-final-modal@2.4.3 弹窗库 出现了 el-cascader 点击外部，popover不隐藏的问题
原因：element-ui 是在 document 上通过监听 mousedown 和 mouseup 事件-来组合判断是否点击的外部【可查看 element-ui 的自定义指令 v-clickoutside】 vue-final-modal 在 .vfm__content dom 上使用 e.st ......
Vue项目element-ui 添加动态校验
需求：一个表单中某个字段，根据另一个字段变化，校验是否必填 <el-form ref="detail" :model="detail" :rules="ruleData" size="small" label-width="100px"> <el-card> <el-row> <el-col :sp ......
element-ui中table组件的全选禁用遇到的坑？
elementui只提供了除全选之外其他复选框的禁用方法： <el-table-column type="selection" width="80" align="center" :selectable="selectable" ></el-table-column> // 禁用table中的复选框 ......
element-ui（table表格）
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 <el-table :data="tableData" style="width: 100%"> <e ......
element-ui（Form 表单）
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker <el-form ref="form" :model="form" la ......
element-ui
安装 npm i element-ui -S 引入 Element 在 main.js 中写入以下内容： import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/ind ......
element-ui 中 Cascader 级联选择器同时获取value值和label值
给Cascader 级联选择器添加一个别名 复制代码 <el-cascader :options="options" ref="myCascader"></el-cascader> 选择完毕之后可以通过别名获取 复制代码 let labelValue = this.$refs['myCascader ......
element-ui中表格@row-click方法自定义传参的写法
@row-click="(row,column,e)=>handleRowClicked(row,column,e,'unitName')" 参考：https://blog.csdn.net/weixin_46060121/article/details/120151005 ......
VUE element-ui之table表格全局排序
### 一 调用后端接口排序功能 步骤： 标签中定义排序方法： ``` ``` 要排序的字段定义排序关键字sortable ： ``` //注意：调用接口排序时必须sortable="true"，表格自带排序则只需sortable sortable="true" ``` methods中实现全局排序 ......
关于 Element-UI 的完整分页
1.首先要在Elment-ui的官网下载安装包 2.然后项目中的 manin.js 中配置组件，使其可以正常使用 3.正确写入配置。 4.然后去复制官网他所给的分页代码，修改参数 <el-pagination @size-change="handleSizeChange" @current-chan ......
ElementUI——vue2+element-ui 2.x的动态表格和表单
# 前言 一个基于vue2.x + element-ui 2.x版本的项目，里面都是CURD的东西，但是前人并未封装组件，而是直接CV，现在要新增一个大模块的功能，就想着封装个组件，后面再基于这个组件对老项目进行改造； > 虽然是一个大模块，但是功能还是比较简单的，结构如下； ![](https:/ ......
element-ui使用巧技
1.全局修改定义message提示信息 //大写的Message是个构造函数 //1是重新定义构造函数来挂载到原型覆盖原来的。 //2是直接引入Message重新定义它的原型方法。 import Element,{ Message } from 'element-ui' const message ......
element-ui 菜单导航的使用
导航属性 原有代码启用 :router="true" 属性2.整理路由 将菜单界面作为根 将菜单对应的相应的界面 放到其下面，相当于其的子代3.在<el-main></el-main> 中放入 页面显示出口 标签 <router-view></router-view> ......
引入element-ui组件
element-ui文档：https://element.eleme.io/#/zh-CN/component/quickstart 1、完整引入，按照如下红框中的引入即可，引入后即可使用element-ui中的各组件 2、按需引入，按照文档中引入即可 ......
vue + element-ui 的from表单嵌套数组的验证问题
在 vue + element-ui/plus 的项目中，有的时候会出现表单自定义增加数组字段，并要对新增加的字段添加相关验证。 举个例子 // 结构 data(){ return{ form:{ name:'', Param:[ {id:0,label:'',Itemtype:0,}, {id:1 ......
element-ui中table组件设置不可选行数据
html代码： <el-table :data="chooseTableColumnData" ref="chooseTableColumn" @select="changeTableColumn" @select-all="onSelectAll" > <el-table-column type= ......
element-ui table表格删除最后一页的数据，返回上一页
delete(item){ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$post( ......
element-ui 设置table 单元格某一列className
在 el-table 上添加 :cell-class-name="cellClassName" cellClassName({row, column, rowIndex, columnIndex}){ if(columnIndex 5){ return 'custom-style' } }, 设置第 ......
element-ui中的$comfirm点击取消后空格键和回车键依然执行删除操作
原因： $comfirm会在上一次执行操作的按钮上自动聚焦选中如果这时点击回车或者空格键相当于又触发了一次删除按钮上的点击事件，而且默认回车和空格键会触发弹层上的确认按钮的点击事件，用户没有将鼠标定在确认按钮，这是组件自己封装的自动聚焦事件以及确认提交事件 解决方法：强制取消键盘的默认行为，在钩子（ ......
element-ui 日期选择器报错 Prop being mutated: "placement"
> 报错信息  > 解决方法，添加`placement="bottom-start"` ``` ``` ......
element-ui中的change事件传递多个参数的方法
相关小例子(比如,我想要目前的选中值和index) <el-select v-model="value" placeholder="请选择"> <el-option v-for="(item,index) in options" :key="item.value" :label="item.labe ......
element-ui e-tree 反显问题
需要反显后台返回的树形id (父节点也需要反显 )因为添加时 后台让父节点得id 也传递过去了 所以返回也带着 思路： 去除默认得 :default-checked-keys="[5]" this.$nextTick(() => { this.menuList.forEach((i, n) => { ......
Element-ui源码解析(二):最简单的组件Button
好家伙,为了有足够的能力去开发组件,先研究一下别人的组件 开始抄袭模仿我们的行业标杆element-ui 找到Button组件的源码 只有三个文件,看上去非常易读,开搞 其中最重要的部分,自然是button.vue <template> <button class="el-button" @clic ......
Element-ui源码解析(一):项目目录解析
开始看原码了,我们要开始一些准备工作, 既然是拆代码,那么我们要先把代码搞到手 1.如何下载原码 随便开个项目 npm i element-ui -S 将源码下载到本地 随后在node_modules中找到element-ui文件夹 开搞 2.目录结构解析 目录结构如下： 1.lib：该目录包含了 ......
element-ui 周、月、季、年的日期时间选择器
日常做项目中经常会遇到根据周、月、季度、年的日期时间选择器，切换不同的时间时选择器也做出相对应的变化，并且获取相对的开始时间和结束时间。 效果如下: 1.先创建子组件--季度的日期选择器 1 <template> 2 <div class="time_quarter"> 3 <mark style= ......
element-ui表格实现表头快速筛选
filterChange(obj) { console.log('obj', obj) const keys = Object.keys(obj) const values = Object.values(obj) console.log('keys', keys) console.log('val ......