草庐IT

element-admin

全部标签

css-修改element ui的el-popover样式

背景:在选择所属部门(部门可新建,则部门会很多)时,如果部门特别多的情况下,在下拉选择时,el-popover弹出框会变得很长很长,页面不美观。 产品要求:在超长时,固定高度,支持滚动条。在代码里修改样式时,一直不生效,仔细查看dom才发现,popover的dom创建在了最外层,也就是和根组件app同级,所以在任何的下写的css均不能生效。如果直接在下粗暴修改,肯定会影响到其他组件的样式,不可以这样修改。查阅官方文档发现,可以为popover组件添加类名,这样就不会影响其他样式了。 代码如下: 效果如下:还可以对滚动条的样式进行修改,比如隐藏滚动条或者改变滚动条的粗细等代码:.el-popov

vue element-ui el-input输入框绑定@keyup.enter回车事件无效

由于element-ui把input进行了封装,input外面是多一层div的。在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。所以对于el-input,使用@keyup.enter是无效的,需要加上.native限制符.native修饰符的作用:当想要在一个组件的根元素上直接监听一个原生事件,这时,就可以使用v-on的.native修饰符。el-inputv-model="serverTimer"@blur="addTimer"@keyup.enter.native="addTimer"placeholder=

vue+element ui表格穿梭框

需求:1.数据移动:左侧数据可移入右侧,右侧数据可移除回到左侧,且移回后顺序不改变2.可进行模糊查询(初始数据为请求后端接口获取,数据移动、模糊查询均为前端实现)左侧框divclass="transferbox">divclass="topbox">spanstyle="color:#1E90FF;font-size:16px;font-weight:550;"v-if="centerDialog.form.shiledType==2">设备列表span>spanstyle="color:#1E90FF;font-size:16px;font-weight:550;"v-if="centerD

Vue+element Upload利用http-request实现第三方地址图片上传

vue第三方地址图片上传+后端图片上传接口开发+postman测试图片上传Vue+element(el-upload)中的:http-request图片上传java后端上传接口,利用OSS存储图片postman测试图片上传功能及方法对比:服务端签名后直传Vue+elementUpload利用http-request实现第三方地址图片上传vue第三方地址图片上传+后端图片上传接口开发+postman测试图片上传前言一、Vue+el-upload二、实现第三方地址图片上传页面:方法:结果:前端代码:二、后端接口引入oss依赖Controller层(***(@RequestParamMultipar

vue element 动态生成表单

场景:表单中的项是由后端返回的,不是前端提前定义好的。{{_item.name}}需要注意的点:1、因为表单上需要绑定v-model来获取此表单项的值,但是要绑的值名称是根据后端数据来的,所以请求回来后端的数据后再渲染整个表单,否则会报错【v-if="configLabelData"】,根据请求到的后端数据动态创建form中的属性//请求后赋值【此时已经请求到了后端返回的数据configLabelData】//动态往表单中添加对应属性及数据for(leti=0;i{this.$refs["form"].clearValidate();});}2、渲染多个checkbox或者radio时,lab

报错:v-html will override element children 解决方法

原因:v-html标签内还有内容divclass="content_box"v-html="goods_info.content">{{goods_info.content}}div>解决方法:删除标签内的内容,如下divclass="content_box"v-html="goods_info.content">div>

前端-element输入框-input的一些限制(只能输入正整数和0,或者只能输入数字不可以汉字字母)

1、input输入框只能输入正整数和0那你就用  οnkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"2、如果是正数负数0,包括小数都可以那就用这个οnkeyup="value=value.replace(/[^\-?\d.]/g,'')",不能输入汉字和字母3、不能输入中文,可以输入正数、负数、小数和字母 οnkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"4、对经纬度的限制网页部分rule部分longitude:[{validator:checkLong,trig

完美解决element-ui-plus按钮点击后不会自动失去焦点

最近新项目采用了Vue3+element-ui-plus,发现按钮点击后,都不会失去焦点,看着很不舒服,结合网上的解决方法,自己优化了下,采用指令方式,感觉很方便:1建立btn指令exportdefault{install:(app)=>{constfun=function(evt){lettarget=evt.targetif(target.nodeName=='SPAN'){target=evt.target.parentNode}target.blur()}app.directive('btn',{mounted(el){el.addEventListener('focus',fun)}

vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

Cascader级联选择器|ElementPlus官方文档里提到可以清空选中节点,使用clearCheckedNodes()方法: 具体用法:1先了解vue3setup中怎么获取ref获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了定义ref:在setup里定义同名空ref:constmultipleTable=ref()然后操作multipleTable,就可以同步操作cascader里面的ref了2调用clearCheckedNodes()调用方法:multipleTable.value.panel.clearCheckedNodes()这样就可

c# - 处理 'Sequence has no elements' 异常

这个问题在这里已经有了答案:Whentouse.Firstandwhentouse.FirstOrDefaultwithLINQ?(14个答案)关闭8个月前。我正在更新我的购物车中的一个数量,但它抛出一个序列没有元素的异常。我什至不知道那是什么意思。起初我以为可能某处传递了一个空值,但事实并非如此,因为我已经检查过:SequencecontainsnoelementsDescription:Anunhandledexceptionoccurredduringtheexecutionofthecurrentwebrequest.Pleasereviewthestacktraceformo