vue
lovlin_l
这个作者很懒,什么都没留下…
展开
-
el-table隐藏checkbox头部选择框,并且替换文字
为了满足特殊需求,需要去掉头部chexkbox的时候,官方的组件并不满足,那么就需要自己自定义去掉头部的checkbox,上代码:el-table头部添加:header-cell-class-name="hideHeaderCheckBox"方法methods: { hideHeaderCheckBox(row) { if (row.columnIndex === 0 && row.rowIndex === 0) { return 'hideHeaderChe原创 2021-10-22 15:39:39 · 985 阅读 · 0 评论 -
elementui el-table选择checkbox,最多选择N条解决办法
使用el-table,多选选择的时候,可以最多选择N条数据有时候使用全选的时候,不想选择全部,而是选择10条数据,而界面上有20条数据,这样的话,就回全部选中,达不到要求,所以上代码<el-table ref="regTable" :data="tableData" @selection-change="handleSelectionChange" @select-all="handleSelectionAllChange" @row-click="rowClick">...</e原创 2021-08-19 15:10:17 · 4051 阅读 · 0 评论 -
解决el-scrollbar滚动条初始化不显示的问题
当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取 到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动,所以解决办法是在获取到列表的时候,调用一下update方法查看源码的时候,因为scrollBar有一个update方法,所以调用这个方法可以解决<el-scrollBar ref="scrollDiv"></el-scrollBar>...// 异步获取列表之后this.nextTick(() =原创 2021-08-11 10:47:06 · 3503 阅读 · 0 评论 -
electron-forge打包如何自定义应用图标
使用electron forge打包的时候,自定义应用图标在package.json里配置的时候,"config": { "forge": { "packagerConfig": { "name": "admin-screen-app", "icon": "./icon/img/admin.ico" } } }如果package的时候图标还没有变化,就改变name的名称就可以了,又可能是缓存造成的...原创 2021-06-22 13:12:54 · 4684 阅读 · 1 评论 -
解决elementui el-tooltip,在弹框之后再次出现的问题
elementui el-tooltip有个bug就就是当有模态确认框的时候,el-tooltip会再次出现,经过一系列问题的排查,是由于tooltip会默认给dom元素一个tabindex属性,当弹框结束之后,tabindex会自动选中,导致再次出现的问题。最后想到了,通过指令方式把tabindex给删除掉,,这样就可以解决问题了创建clearTabIndex.jsconst vueClearIndex = {}/** 解决tooltips,在弹框之后再次出现的问题,原因是由于tabindex原创 2021-05-17 09:15:39 · 4126 阅读 · 8 评论 -
基于elementui的月日插件,不包含年
有个需求是只要求设置月和日,不需要设置年份,按照闰年来计算,搜索官网,并没有符合要求的组件,于是自己写了个组件,后期有用到的童鞋可以来借鉴老规矩,先上图可选择月份代码如下:<DateMonthDay :date.sync="form.date" :dateDefault="form.date"></DateMonthDay>jsimport DateMonthDay from '@/components/DateMonthDay'DateMonthDay<原创 2021-05-11 15:01:58 · 1988 阅读 · 0 评论 -
解决elementui,table抖动问题,:key=“Math.random()“
以前开发了一个功能,table的column,可以根据条件if来判断是否显示,于是乎就看网上有个解决办法,是在column上增加个key属性:key="Math.random()",完美的解决了if判断不显示的问题。可是后来,发现,界面有form表单的列表,input变得越来越卡,输入都是卡顿,优化了好多地方都是无解,最终是因为:key="Math.random()"导致的,因为每次跟新表单的时候,key的随机数会发生变化,导致了组件的渲染,这也是table抖动的原因,解决办法是替换key属性,不要使用原创 2021-03-29 16:43:55 · 5125 阅读 · 2 评论 -
解决elementui table固定列的时候,滚动条被遮挡的问题(适用合计)
前段时间突然发现,当固定table列的时候,右侧的滚动条会被折腾,而不能拖动,上图以前的时候固定列都是在右侧,也没有注意到这种问题,上次放到左侧,才发现拖不了了,上官方issues上找到了问题所在,官方的bug方案一通过设置css属性.el-table__body-wrapper{z-index: 2}就可以了,但是有个小问题就是右侧浮动,中间的部分,失去了阴影,感觉没有分离开https://github.com/ElemeFE/element/issues/20515方案二.转载 2021-01-08 16:20:39 · 5609 阅读 · 0 评论 -
vue防止表单重复提交,节流函数
有的时候网速不好,或者用户习惯不好的时候喜欢双击按钮,就会造成表单重复提交多次,看下图然后添加了个节流函数,这样在短时间内点击的话,只会执行一次,上代码:/** * 节流函数 在规定的时间内请求函数的次数 * @param fn 需要执行的方法 * @param interval 执行的间隔时间 */export function _throttle(fn, interval) { let last = 0 let timer const interVal = inte原创 2020-09-21 13:51:06 · 2228 阅读 · 1 评论 -
VUE 调用PC摄像头,HTTP下也可以使用
由于内网使用,调用当前pc的摄像头,进行拍照上传功能,而浏览器由于安全策略考虑,只支持本地调用摄像头,服务器上禁止使用,新版chrome支持修改安全协议,代码如下:chrome://flags/#unsafely-treat-insecure-origin-as-secure下面写了个子组件photo.vue,来调用,可以上传多张照片,通过elemenui支持查看<template> <div> <el-dialog v-el-drag-dialog翻译 2020-09-18 11:30:43 · 2639 阅读 · 0 评论 -
列表加锚点定位
有时候会有一些特别的需求,比如说想实现一个列表,而且列表里面有多条同类型的数据,想区分他们,但是普通的table实现不了,只能自己另辟蹊径了,滚动的时候固定当前的头部,横向滚动固定左侧数据等;如下图:代码例子如下:<template> <div class="app-container"> <div class="num-box"> <div ref="numBoxLoading"> <div id.原创 2020-08-17 13:54:21 · 659 阅读 · 0 评论 -
解决elementui table合计不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度话,就没有了,打开控制台可以看到这个合计是存在的于是乎,在vue的生命周期updatedthis.$nextTick(() => { this.$refs['table'].doLayout();}) 添加这个就解决了...原创 2020-06-17 15:10:58 · 6781 阅读 · 5 评论 -
elementui table多层嵌套显示
有个需求是一个列表,里面包含多个单子,每个单子可以是唯一,也可以是多个合并之后的,而且每个单子下面显示的是另外一个表格,来上图每行的操作还不一样,然后通过官网的一些例子总结了一下合并代码<template> <div class="app-container"> <div> <el-table :da...原创 2020-04-29 14:45:34 · 12814 阅读 · 1 评论 -
elementUI Table的行合并通用方法
有些业务需求是需要table进行行合并的,所以就写了个通用的方法来处理,废话不多说,先上图首先是内部使用el-table的方法:span-method='objectSpanMethod'data() { return { table: [{ id: '1', checkRoom: 'CTROOM', checkProject: '颈椎...原创 2019-05-29 18:16:44 · 16529 阅读 · 57 评论