Vue
不定期更新、记录Vue日常学习和使用中遇到的问题和小技巧
_修铁路的
工作是为了更好的生活,生活是为了更好的工作
展开
-
【Vue】element 组件 el-upload 动态绑定上传地址 action
el-upload 动态设置上传路径 action原创 2023-02-24 15:44:05 · 3078 阅读 · 1 评论 -
el-upload 上传视频时,动态截取视频第一帧画面作为封面展示
el-upload 上传视频,动态截取视频第一帧作为封面原创 2022-11-07 16:58:31 · 5350 阅读 · 4 评论 -
el-date-picker 设置日期可选范围
el-date-picker 设置日期可选范围 Element 中 el-date-picker组件 type="date" 时,设置日期可选起始或截止时间。原创 2022-09-15 10:52:59 · 3097 阅读 · 0 评论 -
解决 el-table 多选框,翻页选中失效问题
解决 el-table 多选框,选中后,翻页再回来选中失效问题。解决办法:1. 在 el-table 中增加 row-key="id"2. 在多选框列中增加 reserve-selection,如下:<el-table-column type="selection" reserve-selection></el-table-column>完整示意:...原创 2022-05-27 17:31:44 · 3543 阅读 · 4 评论 -
【Vue】el-select 获取当前选中对象
el-select 获取当前选中对象原创 2021-12-31 17:30:16 · 8542 阅读 · 1 评论 -
【vue】el-table 优化单选效果,加入el-radio
前言: 开发中经常遇到需要列表单选的情况,先前我用的是CheckBox,通过el-table自带的 selection-change 方法中的逻辑处理来实现单选效果,但这有个缺点就是 当点击全选按钮时,方法中设定的逻辑就不好用了,导致页面只选中一条,而取值却取到了所有。 今天有点时间,对这个做个改造,顺手记录下。解决办法: 由element api中的table组件api(https://element.eleme.cn/#/zh-CN/compon...原创 2021-07-22 15:16:19 · 5449 阅读 · 2 评论 -
[Vue] 设置 el-date-picker 今日之前的日期不可选
<el-date-picker type="month" format="yyyy/MM" :placeholder="languageList.validTime" :picker-options="validTimeOption"/>原创 2021-06-11 16:14:30 · 1031 阅读 · 0 评论 -
Vue el-tree实现单选效果
场景: 今天在做项目的时候,前端业务数据设计到树形展示,并需要单选,打开Element,选中 el-tree 组件,但官方文档中只支持多选,并不支持单选,需要对当前组件进行一定的拓展,以达到满足我们项目中的 要求。解决思路: 首先通过组件api 中可以得知,el-tree中有check-change 事件,即当前节点选中状态发生变化时的回调,通过这个我们可以获得当前操作的节点对象。 其次,在 el-tree 组件的方法中我们能找到setChecked...原创 2021-03-04 15:35:38 · 7649 阅读 · 6 评论 -
vue使用v-for遍历map,获得对应的 key 和 value
场景: 如题,最近在使用vue开发页面过程中,遇到需要表格中,使用v-for遍历map获取对应的key和value。 首先来展示优秀后端(没错,也是在下)处理返回的数据JSON格式(返回数据已脱敏处理,请放心食用){"total":1,"rows":[{"sysRightMap":{"10":"值A,值B","40":"值1,值2"}}]}页面需要通过v-for in 的方式遍历取出返回对象中的sysRightMap对象里面的值,分别得到对应的key和value,页面...原创 2021-02-19 18:19:53 · 10657 阅读 · 0 评论 -
解决 el-select multiple 下拉多选控件,一进页面就会触发表单校验问题
场景: 新增页面使用el-select multiple 下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如下图所示: 预期效果是:打开页面,职能属性和其他属性一样,不会自动触发表单非空校验,而是在操作当前属性时触发。 经过查询和测试,目前找到两种方法,但总体都是思路都是一致,设置初始值为空数组即可解决方法:第一种: 页面初始化时,设置当前属性(职能属性)初始值为空数组,例如:[]export d...原创 2021-01-05 10:12:53 · 8940 阅读 · 4 评论