element-ui
SwJieJie
越努力,越幸运 good lucky
展开
-
element-ui添加动态表格并合计行合并行操作
项目开发过程中,我们有时候会遇到表格里面数据进行动态添加修改删除的操作,表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用!原创 2023-02-21 16:04:24 · 3010 阅读 · 0 评论 -
el-cascader的使用以及报错解决
问题描述:场景:有的类型没有数据,这时cascader的options是[ ],下拉框是空的。如果选择了一个类型,根据类型获取了cascader的数据,在cascader中选择了一条数据,再更换类型,没有这条数据了就会报错这是在使用element ui中的cascader出现的报错原因暂时不清楚,个人理解可能是因为数据源没得到及时更新,而vue是数据驱动的,所以我加了监听器,并且给cascader绑定了一个key,这样只要监听到数据源发生变化,key 就变化,就重新渲染解决办法1:如果没有数据就将原创 2022-07-04 17:33:25 · 2265 阅读 · 0 评论 -
element ui el-date-picker时间限制,结束日期时间不能小于等于开始日期时间和只能选当天和昨天
日期时间校验原创 2022-06-20 18:15:10 · 2582 阅读 · 0 评论 -
elementUI的弹框el-dialog优化高度为视口高度
问题:elementUI的弹框el-dialog高度虽然是根据内容自动撑开,但是当内容很多的时候,往往下面的操作按钮会被遮挡,需要滚动条才能保存,用户体验极差。现在对弹框进行优化1、当内容不多的时候,弹框自动撑开高度就可以。2、内容很多的时候,弹框高度为视口高度的90%(90vh),中间内容区出现滚动条。// el-dialog高度自适应,内容超出时中间出现滚动条.common-dialog { display: flex; justify-content: center原创 2022-05-31 16:33:06 · 8892 阅读 · 0 评论 -
vue element-ui tree树形控件中默认选中和回显问题
问题:我们使用树形控件在编辑时候有时候,会遇到回显数据是上一条回显给的数据。这个问题是由于我们的树形控件没有重新渲染导致的。比较笨的方法是每次编辑的时候重新加载一遍树形控件然后再进行回显选中的数据。不过这样会导致页面多次渲染影响加载速度和性能。解决办法:1,通过 this.$refs.tree组件上自定义ref名.setCheckedKeys(this.defaultList)<el-tree ref="tree" :data="dataList" show-checkbox原创 2022-04-18 16:03:10 · 8848 阅读 · 0 评论 -
Vue里面使用el-cascader 级联选择器 children为空 和获取value和label问题
问题描述1, 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据在后端处理完树形数据之后最后一个children数组为空数组,这样就会产生bug解决方法: (和后端处理数据一样就行递归判断数组是否为空) getClassificationTree() { getClassificationTree({ 'name': 'name' }).then(response => { this.options = this.getTreeD原创 2022-03-14 18:33:35 · 4532 阅读 · 0 评论 -
Element-UI对Table表格的简单封装
问题描述:我们再开发中有时候会遇到相同功能表格,这个时候会将表格进行封装拆分处理。这里暂时记录一下简单的封装,加上一些必要的属性,其他属性有需要再加上去。1,Table子组件<template> <div class="TableGrid"> <el-table header-row-class-name="table-list-header" row-class-name="table-list-row" :max-heig原创 2022-02-14 11:29:48 · 2648 阅读 · 1 评论 -
ElementUI 中在原有的方法中传递自定义的参数
问题描述 : ElementUI 中的自定义方法带有参数, 当需要自己传递一个参数, 又不想覆盖方法本身参数例如 select组件中 change 方法 本身定义了参数, 但是给函数传递一个新的参数, 需求就产生了1,当需要传递自定义的参数的时候需要给方法传递本身定义的参数, 有几个参数传递几个, 之后在最后传递自定义的参数<el-select v-model="item.value" @change="(val) => changeFnc(val,item.value")" filte原创 2022-02-11 18:12:04 · 1692 阅读 · 0 评论 -
Element 中表格表头添加搜索图标和功能使用
问题:我们使用element-ui的表格开发中,会遇到在表头添加搜索的功能。解决办法:我们可以通过设置 Scoped slot 来自定义表头。1,headerData是表头的循环数组2,tableData是表格内容的数组3, 自定义表头的内容4,注意:在使用的时候,只会显示表头的自定义内容,表格的内容还需要使用 {{ scope.row }} scope.row会显示出该列的所有内容,5,如果不使用slot-scope='scope’会出现不能输入的问题6,Vue 2.6+版本的插槽语法使原创 2022-02-11 17:55:48 · 3863 阅读 · 0 评论 -
Vue 中对ElementUI的Dialog弹窗组件封装
1,子组件的写法<el-dialog title="提示" :visible.sync="visible" :close-on-click-modal="false" @close="QualityDialogClose"> <span slot="footer" class="dialog-footer"> <el-button @click="QualityDialogClose">取 消</el-b原创 2022-02-11 17:31:07 · 4259 阅读 · 2 评论 -
vue项目升级element-ui
由于之前项目使用的element-ui 1.X版本,目前1.X的版本已停止维护,所以项目升级到最新2.X版本。以下是对vue项目,element-ui 1.X版本升级到2.X版本的记录。① 卸载老版本npm uninstall element-ui② 安装最新版本npm install element-ui -S③ 修改项目中main.js中theme-default修改为them...原创 2020-05-07 11:15:25 · 703 阅读 · 0 评论