草庐IT

解决element ui中el-tabs标签点击切换闪屏问题

现象:点击切换elementui中el-tabs时候,table会出现闪一下的状况;初始elementui中el-tabs组件代码如下:使用v-if="activeName==='first'"解决闪屏 改造后代码如下:v-if="activeName==='first'"/>v-if="activeName==='second'"/>v-if="activeName==='three'"/>v-if="activeName==='four'"/>

vue+el 实现 阶梯效果

[简介]:关键代码;{{menu.name}}.midPart{float:left;width:4%;padding:7px7px;background:#444;}[内容]:{{menu.name}}exportdefault{name:'MidMenu',data(){return{path:this.$route.path,midMenus:[{link:'/',name:'散记',title:'散记'},{link:'/',name:'编程',title:'编程'},{link:'/',name:'数学',title:'数学'},{link:'/',name:'天文',title:'

前端实现输入框实时搜索,【vue+el-input】

一般搜索都是调后端的接口,绑searchValue字段(也有可能叫其他的字段名),通过后端的接口进行实时搜索如果由前端自己实现搜索过滤的话也简单1、input事件el-inputv-model="queryParams.searchValue"@input="keywordChange($event)"clearablestyle="width:180px"/>2、绑数据源的时候,根据条件判断用过滤数组还是原数组el-tableref="elTable"class="mblclass"border:data="filterList.length?filterList:datalist"styl

【element UI 中的af-table-column组件】el-table-column如何自适应调整列宽,简单高效!!!

在elementUI框架中,组件el-table-column代表table的一列,有时候我们不想让里面的内容换行,网上的方法一般是需要给自适应列宽的column写一个动态的width,比较麻烦。有没有一种更简单高效的方法呢,有的!!使用af-table-column组件!!!一、af-table-column简介:af-table-column是基于element-ui组件库的el-table-column组件,支持自适应列宽功能二、安装npminstallaf-table-column三、使用使用前得先导入,对于第二行“Vue.use(AFTableColumn)”,现在一般不用这句,把A

el-upload 上传图片 Failed to execute ‘readAsDataURL‘ on ‘FileReader‘【bug修复】

场景: el-upload上传图片,读取文件成base64的时候,console报错:         Failedtoexecute'readAsDataURL'on'FileReader':parameter1isnotoftype'Blob'报错代码:/***File转base64*@paramfile*@returnbase64**/exportfunctiongetBase64(file){returnnewPromise((resolve,reject)=>{constreader=newFileReader();letfileResult="";reader.readAsData

el-select值的回显问题:如何使element-ui的下拉框显示label值

今天写前端又遇到个很神奇的事情,element的下拉框el-select出现了一点儿问题,回显的时候显示value的值,这个强迫症看来就很难受 我写的代码是这样的查阅大量资料,突然发现一个简单的方法,那就是vue的v-bind的神奇之处,v-bind的简写是:冒号所以解决方法就来了(敲重点) 在value上绑定v-bind改完之后的代码是这样的,再来看element的下拉框el-select就显示lable的值了, 今天又解决了一个问题,开心值加1。

vue+element项目中多个tabs页调一个接口、多个tabs页调多个接口

1.多个tabs标签页请求同一个接口2.多个tabs标签页请求多个接口 需求描述:有三个可切换的tabs页签,红色的两个框里的tabs页签请求的是同一个接口,但是两个页签传递的参数值不一样,橙色的框里请求的是另一个接口。通过点击不同的tabs页签去跳转页面并请求不同的接口返回的数据。默认显示最新知识页签的数据。html页面: 最新知识和热门知识调的是同一个接口,排行榜是一个接口。接口:最新知识和热门知识的接口给后端传的参数rankingType(直接传汉字 ):"最新知识"or"热门知识"。排行榜的接口给后端传的参数rankingListType:"下载排行"。实现: 在api文件里新建相关文

iOS 8 : Selected image for custom tab bar item set in interface builder does not work

我已将Storyboard选项卡栏项目设置为自定义,将图像设置为我的轮廓图像,将所选图像设置为我的填充图像,但是当我运行该应用程序时,所选图像没有显示。如果我使用UITabBarItem(title:String?,image:UIImage?,selectedImage:UIImage?)我使用Xcode6.1.1。有什么问题吗? 最佳答案 我认为,这是Xcode的一个错误,如果您添加类型为Image且keyPath为“selectedImage”的用户定义的运行时属性,您将可以设置图像。这里是选项卡式应用程序模板的示例,在第二个

前端仿新浪新闻 tabs 选项卡tabs标签页,根据文字多少自适应 tab项宽度

前端仿新浪新闻tabs选项卡tabs标签页,根据文字多少自适应tab项宽度, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12876效果图如下:  实现代码如下:####使用方法```使用方法```####HTML代码部分```html默认设置设置下划线颜色设置间距设置行高```####JS代码(引入组件填充数据)```javascriptimportccScrollTabsfrom'../../components/cc-scrollTabs/cc-scrollTabs.vue'exportdefault{compo

微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

问题描述今天第一次接触vant组件库。ant官网地址适用于Vue3支持Vue2、Vue3、微信小程序等我在使用van-tabs组件时遇到了一个问题,如下图所示:从图片上可以看到有个灰色的横向滚动条,一开始领导给我说这个问题,我反反复复都没有测出来,在微信开发者工具、IOS系统都没有这个问题,但是小程序发布后,在安卓手机上复现了这个问题。一开始我是昏头雾水,经过百度搜索,找到了解决方案,下面分享给大家:解决方案你在哪个页面上使用的van-tabs组件,就在那个页面的标签里加上下面这段css样式,保存重新编译一下,看下能否解决你所遇到的问题。/**去除滚动条样式*//deep/::-webkit-