草庐IT

custom-element

全部标签

记一次低版本element-ui升级

背景该项目是属于一个招聘后台管理系统,左侧菜单,右侧内容布局,技术栈为vue为"2.1.8",element-ui为"1.2.5",vue-template-compiler为"2.1.8"业务需求需要在弹窗中渲染带元素标签的内容,查看element-ui文档可知,文档最低版本到1.14.13,并且要到这个版本才能在弹框里自定义不同的内容,所以决定升级element-ui版本升级过程1、讲element-ui版本升级到目标版本之后,发现其需要依赖vue版本2.3.0以上2、那么就需要根据需要将原来的2.1.8版本的vue,升级到2.3.0,之后启动项目失败,报错的提示信息是Vuepackage

vue element ui el-popover 样式修改不生效解决方法

在使用element的el-popover组件时,会发现自己对el-popover写的样式不起作用,甚至连使用::v-deep‘>>>’/deep/行内Style这四种样式穿透都不起作用,这是因为el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级。所以需要全局设置style首先给它添加一个特定的类名,千万别重复,语义命名以免样式污染popper-class="down-popover"然后在当前文件样式中不加scoped写一份stylelang="scss">.down-popover{padding:0;}/style>

element-ui日历组件el-calendar选中特定时间以及样式修改

项目开发中,有需要用到日历的组件,而且需要把某些日期标注起来,在这边标注的小红点我用了el-badge具体效果如下图所示: 页面标签:{{data.day.split('-').slice(2).join('-')}}变量声明://日历calendarValue1:newDate(),activeday:[//日历组件选中的日期,小红点,时间格式必须为yyyy-MM-dd,比如3月5号要写成03-05而不是3-5{dat:'2023-03-21'},{dat:'2023-03-15'},{dat:'2023-03-05'}],样式修改:/*日历样式修改*/.data-analysis/deep

Vue2.0安装Element-ui

1.在项目终端输入npmielement-ui-S如果想知道是否安装成功 2.随后在main.js里引入element组件//加载element组件库importElementUIfrom'element-ui'//加载element组件库的样式import'element-ui/lib/theme-chalk/index.css'//全局注册element组件库Vue.use(ElementUI)然后去使用element 就这样成功了 

element ui 层级选择器el-cascader只能选最后一级多选

在elementui中el-cascader多选:每个层级都可以选择,但并不是我需要的,我需要多选只能选最后一级,在网上找了很久都复杂的,最终自己选择用css样式对checkbox进行隐藏。实现方法:在css中加入.el-cascader-panelli[aria-haspopup].el-checkbox{display:none;}关键点在于利用属性选择器,遇到属性是aria-haspopup(表示点击的时候是否会出现菜单或是浮动元素)则设置checkbox不展示则会达到一下效果

element-ui添加动态表格并合计行合并行操作

项目开发过程中,我们有时候会遇到表格里面数据进行动态添加修改删除的操作,表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用!最终实现的效果图如下:注意:这里的新增操作人不能重复添加,新增的时候有删除操作,有编辑的数据进来的时候表格里面才会显示编辑文字。1,添加动态表格return{ //表格数据 productivityForm:{qualityinspectorTable:[]},//添加操作人和动态表格里面的输入框数据qualityinspectorForm:{qualityinspectorId:'',weChatproductNumber:

element-plus 报错 ResizeObserver loop limit exceeded 解决

不多说,报错信息就长上面这个样子,网上找了很多方案都没解决,例如在onerror钩子中忽略这个错误,所以我上我的解决方案,代码如下:constdebounce=(fn,delay)=>{lettimer=null;returnfunction(){letcontext=this;letargs=arguments;clearTimeout(timer);timer=setTimeout(function(){fn.apply(context,args);},delay);}}const_ResizeObserver=window.ResizeObserver;window.ResizeObse

types - 去戈兰 : Type assertion on customized type

http://play.golang.org/p/icQO_bAZNE我正在练习使用堆进行排序,但是prog.go:85:typebucketisnotanexpressionprog.go:105:cannotuseheap.Pop(bucket[i].([]IntArr))(typeinterface{})astypeintinassignment:needtypeassertion[processexitedwithnon-zerostatus]我遇到了这些错误,无法弄清楚如何正确输入断言问题出在以下几行:heap.Push(bucket[x].([]IntArr),elem)a

types - 去戈兰 : Type assertion on customized type

http://play.golang.org/p/icQO_bAZNE我正在练习使用堆进行排序,但是prog.go:85:typebucketisnotanexpressionprog.go:105:cannotuseheap.Pop(bucket[i].([]IntArr))(typeinterface{})astypeintinassignment:needtypeassertion[processexitedwithnon-zerostatus]我遇到了这些错误,无法弄清楚如何正确输入断言问题出在以下几行:heap.Push(bucket[x].([]IntArr),elem)a

Element ui关闭el-dialog时清除数据

如果是按叉叉关闭或者点表单以外空白处关闭的话可以给el-dialog添加  :before-close="closeForm"在methods里添加函数closeForm(){this.$refs.form.resetFields();//清除数据this.dialogFormVisible=false;//关闭对话框}如果是按取消按钮清除数据,也可以给取消按钮绑定点击事件,点击取消则调用closeForm函数。注意:要为每个form-item加上prop属性,要不然无法清空resetFields()方法是重置表单,重置为初始值,而不是设置为空值