element ui
杨同学*
你好,我是杨同学。
展开
-
【vue+el-upload+vue-cropper】vue图片上传,vue-cropper图片裁剪后上传
preview-src-list=“item.fileList” 预览的图片列表,同:file-list=“item.fileList”:on-change=“onChange.bind(null, item.index)” 不加.bind会报错,:file-list=“item.fileList” 上传的图片列表,数组对象格式[{url:xxxx}]预览,删除,裁剪,三个按钮,目前功能与预览无关,预览功能有空再另写吧。用的el-upload加el-image组件。下载vueCropper插件。原创 2023-11-10 15:29:00 · 527 阅读 · 4 评论 -
【vue+el-table+el-backtop】表格结合返回顶部使用,loading局部加载
局部loading有时候会出现定位不准情况,会定位到全屏loading。可以看到首先是局部的loading,加载完后变成了全屏的loading。可能父元素类名会有差别,只要是滚动dom的父元素就可以了。记录一下平常遇到的小bug 下期再见!target绑定需要加载局部loading的dom。解决办法就是给举报loading的元素加一个。原创 2023-08-10 10:34:58 · 623 阅读 · 5 评论 -
element的el-select给下拉框添加背景以及鼠标离开背景色不消失问题
1,给下拉框添加背景色// 下拉框内容背景色.el-select-dropdown__item.selected,.el-select-dropdown__item:hover,.el-select-dropdown__item.hover{ color: #fff; background: #409EFF;}效果图:ok,有效果了.2,解决添加背景鼠标移出去背景不消失问题,当我鼠标移出下拉框的时候,看效果:看,鼠标移出下拉框了,hover的背景色并没有消失**(看框里面,我.原创 2022-05-19 10:24:43 · 5586 阅读 · 10 评论 -
element ui的select下拉框实现多选数据回显
效果图:思路:v-model绑定的是一个数组,里面包含你所选择的值,拿到的是一个串数字,需要转为字符串,再转按逗号分隔成数组进行赋值。代码: <p class="adzjgs"><span>护士姓名:</span> <el-select multiple v-model="mnurseId" :multiple-limit=3> <el-option :value="item.id" v-fo原创 2021-08-03 09:28:44 · 5487 阅读 · 9 评论 -
element ui表格中根据某列的值判断操作栏里面的按钮显示隐藏
效果图:这里我上通过审核意见那列的值判断操作里面的审核按钮的显示隐藏。首先审核意见那列后台给我返回的是A、B、null三种值,然后我再将这三种值转换为已驳回、已通过、未审核。三个中文显示在页面上。这个是通过 :formatter属性改的,前面有讲过就不细讲了。然后如果是已通过或者已驳回审核按钮都不显示,只有是未审核的情况下才会显示审核按钮。看代码:核心代码:slot-scope="scope"v-if="scope.row.yzdb01D290 ==null?true:false"HTML:原创 2021-06-01 18:02:07 · 5053 阅读 · 3 评论 -
element ui表格表头中某列标题用图片图标代替
效果图:我这里用的是图标代替,图片也是一样的。话不多说,代码来了!HTML: <el-table-column prop="xxx" :render-header="renderHeader" label="锁" width="55" fixed="left" ></el-table-column>JS:methods:{ renderHeader() { return( &原创 2021-06-01 16:59:44 · 921 阅读 · 2 评论 -
vue中的select下拉框多选
效果图:代码:css: <el-select v-model="xxx" multiple value-key="id" collapse-tags @change="clk"> <el-option v-for="(item,index) in arrs" :label="item.name" :value="item" :key="index"> </el-optio原创 2021-05-25 11:26:52 · 4417 阅读 · 6 评论 -
element ui表格内容替换为图形,以图形展示出来
效果图:核心代码:formatter='one’formatter这个方法在官方文档中有介绍,我就不过多介绍了这里一第一列为例:html <el-table-column prop="yi" align="center" label="1" width="35" :formatter="one"></el-table-column>jsrow.yi就是第一列的prop对应的数组里面的值 //数字转换为图形显示 one(row, column) {原创 2021-04-26 17:00:32 · 1359 阅读 · 10 评论 -
element ui 表格常见特殊的属性
element ui 表格的常见特殊属性1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字带括号)6,表头边框与文本边框对不齐情况7,导航栏的侧边栏只展开一个下拉菜单1,表格内容太多用…表示有时候表格内容太多一行显示不下,但是又不想换行,换行影像表格美观程度。解决:在每一行中加:show-overflow-tooltip效果图:代码:2,修改element ui自带的样式有时候element ui自带的原创 2021-04-26 11:13:04 · 2073 阅读 · 10 评论 -
解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题
解决按钮背景色切换,页面和路径没有切换问题上篇博文中 点击导航栏切换背景色 有一个bug,点击了新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;全新的 KaTeX数学公式 语法;增加了支持甘原创 2021-04-22 09:08:39 · 965 阅读 · 5 评论 -
点击导航栏按钮切换按钮背景色
解决点击导航栏点击哪个,哪个就高亮变色,其他恢复原状。这里我用的是vue框架和element ui组件库写的。主要就是一个点击事件和一个for循环。HTML <div id="app"> <!-- 导航栏 --> <div id="nav"> <router-link @click.native="dianji(index)" :class="{ clk: index == dynamic }"原创 2021-04-15 16:18:44 · 1659 阅读 · 2 评论