Element UI
onlylele
细节决定感知!
展开
-
el-checkbox-group多选框编辑时渲染显示,修改选择无效问题;
1、问题描述:使用elementui 中的多选框组件,编辑表单内容时可以正常显示,但是改变时一个选择无效,显示状态没有修改成功问题;如下图所示:2、使用说明:仅部分主要代码,markList 为被选项列表。 // 修改客户标签改变 , i handleRoleCheckedChange(m) { this.markList.forEach((itds, i) => { if (itds.wholesaler_mark_id === m.wholesal原创 2021-03-30 15:04:11 · 2534 阅读 · 0 评论 -
elementUI 表格右侧固定布局错误问题
问题效果如下:解决:1,html 布局中添加:2. 页面中覆盖原样式代码:<style lang="scss" scoped> .table-fixed { /deep/ .el-table__fixed-right { height: 100% !important; //设置高优先,以覆盖内联样式 } /deep/ .el-table__fixed { height: 100% !important; //设置高优原创 2021-03-19 16:51:56 · 1313 阅读 · 0 评论 -
Elementui cascader组件如何取消选中 clearCheckedNodes
问题在form表单中使用cascader,某些需求下会将整个表单disabled,如果此时点击了cascader,它会disabled,但弹出框不会消失。查看文档给cascader设置上ref<el-cascader v-model.trim ="cId" ref="cascader" :options="category" @change="handleChange"></el-cascader>调用 // 清空选中的节点 this.$ref原创 2020-10-12 14:30:39 · 5353 阅读 · 3 评论 -
Element ui 设置默认时间显示
element ui 选择时间组件:需求:实现默认时间定位于当前时间延后7天的日期;且当前时间之前的日期不能选;html部分: <el-date-picker v-model="shopForm.end_time" type="datetime" size="medium" style="width:100%" .原创 2020-10-08 15:40:47 · 5948 阅读 · 1 评论 -
elementUi 表格内输入框深拷贝问题处理
问题:使用el-table 表格,其内有输入框内容,每行的表单内容设置后,不能影响其他行的数据内容;因为el-table 表格内容编辑框的值都是直接从表格的row中取值赋值的 属于浅克隆 所以同一源里的数值也会改变;解决方法:使用Object.assign()赋值,不要直接赋值;效果如下:主要代码如下:<template> <div class="system-ship-money overflow-auto"> <el-form :mo.原创 2020-08-27 11:25:10 · 1952 阅读 · 0 评论 -
Element Ui 切换页面后刷新,数据清空,缓存处理;
实现需求如下图所示:当添加的内容输入后,没有保存,切换了页面路由,再返回到此页面,数据内容消失了;需要保存输入的内容处理;方法一、通过添加缓存方法添加保存;以下是部分主要代码:主要本地存储代码// 取缓存 getStorage() { this.newVal = JSON.parse(localStorage.getItem('alloatAddInfo')) ? JSON.parse(localStorage.getItem('alloatAddInfo'))原创 2020-08-21 15:33:16 · 5173 阅读 · 0 评论 -
Element UI table表格的使用细节项目实用
1. 使用表格时,表格列内容有时显示的顺序变化了,解决加 key属性方案如下:2.表格头部显示 类似于tooltip 的内容帮助提示:如下使用原创 2020-07-22 19:09:12 · 465 阅读 · 0 评论 -
ElementUi 使用PrintJs 实现基础打印功能
打印预览效果:代码简单实现: <el-button size="small" plain type="primary" @click="CreateOneFormPage">打印采购单</el-button> <el-table id="printJS-form" ref="table" :data="purchase_item" show-summ原创 2020-07-07 10:05:30 · 7338 阅读 · 3 评论 -
Element Ui 下拉选择框内追加添加按钮,点击可以追加新的选项内容
功能需求,在下拉选项框内,追加一个添加的按钮,点击可以添加新的被选项内容;效果展示如下:代码实现封装组件:<template> <span> <el-cascader ref="cascader" v-model="selectedOptions" size="medium" style="width:100%" :props="defaultParams" :options=原创 2020-06-28 14:25:05 · 12351 阅读 · 6 评论 -
Element UI 表格头部添加合计项设置;
需求:请求过来的数据需要在表格头添加合计项统计。效果如下:代码实现:vue/html:span-method="arraySpanMethod"js: // 插入合计的数据 summaryFun(obj){ var obj = obj; this.tableData.unshift(obj); }, // 合并合计第一行 arraySpanMethod({ row, column, rowIndex, columnI原创 2020-06-08 09:24:04 · 3803 阅读 · 3 评论 -
Element UI 时间选中格式化设置
使用element ui 时间选中组件 返回的是个数组,且格式不是我们需要的字符型格式,需要转换为正常的日期时间格式。如:2020-12-15 10:12:10 /** * 时间切换改变 * @newv 时间标签名 * @type 类型 */ getChangeTimers(newv) { const d = new Date(newv[0]) let hour = d.getHours() hour =原创 2020-06-13 10:49:14 · 953 阅读 · 0 评论 -
Element Ui 表格内编辑排序设置
实现效果:代码实现:<!-- html --> <el-table-column prop="sort" label="排序" sortable width="72"> <template slot-scope="{row,$index}"> <div @dblclick="{{ chengenum($index) }}"> <el-input v-if="editable原创 2020-06-27 16:26:49 · 1001 阅读 · 0 评论