![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element-ui
椰卤工程师
这个作者很懒,什么都没留下…
展开
-
【避坑指“难”】el-table表格实现单选
el-table选择多行数据时使用 Checkbox,那么同样的,如果想支持单选的话,我们就可以把Checkbox的功能改为Radio即可。<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label="选择项" width="55"> <t原创 2022-05-05 12:42:14 · 19233 阅读 · 8 评论 -
基于vue+element-ui实现Cascader级联选择器+Table树形数据
开发进度提前50%,啊,真香。下面,看图说话Table树形数据Cascader级联选择器功能实现+详细代码Cascader级联选择器options属性指定选项数组即可渲染出一个级联选择器,所以后端接口返回的数据结构要保持一一致性,这样处理起来会省很多事。element官网给出的options需要的数据格式:options: [{ value: 'zhinan', label: '指南', children: [{原创 2020-11-13 13:09:14 · 2171 阅读 · 1 评论 -
【避坑指“难”】unicode的那些坑:将emoji编码为unicode
问题描述:例如贴吧、微博、论坛等有发帖和评论的功能,android、ios、前端需要对用户输入的emoji表情进行编码后存入数据库,保持三端统一,在内容显示上保持同步。解决方案:可以使用 unescape() 对 escape() 编码的字符串进行解码。1、前端拿到数据后,通过unescape()对unicode进行解码,可以正常显示emoji表情2、前端提交数据时,需要把emoji编码传回给数据库在这个一来一回的过程中,发现编码后的格式会出现误差,需要把符号替换成unicode格式这样原创 2020-09-23 17:13:04 · 1015 阅读 · 0 评论 -
【避坑指“难”】vue 如何通过点击触发另一个点击事件,即模拟点击事件
在前端中有时候会有这样的需求,通过点击一个按钮触发另一个按钮或者另一个链接的点击事件,在vue中我们通过下面方法解决:1、给另一个按钮添加ref <el-button ref="uploadImgBtn">上传图片</el-button>2、触发事件this.$refs.uploadImgBtn[0].$el.click()...原创 2020-06-03 10:02:13 · 5561 阅读 · 0 评论 -
【避坑指“难”】DateTimePicker 日期时间选择器:结束时间不能小于开始时间
选择开始时间:选择结束时间:DateTimePicker 组件:```typescript <template v-slot:start_time="{ form, formItemKey }"> <el-date-picker v-model="form[formItemKey]" type="datetime" placeholder="选择开始时间" va原创 2020-10-22 11:04:05 · 872 阅读 · 2 评论 -
【避坑指“难”】代码详解:阿里云oss上传视频,服务端签名后直传(vue+element-ui)
文档直达:服务端签名后直传没有采用JS客户端签名直传上是因为,此过程AccessKey ID和AcessKey Secret会暴露在前端页面,因此存在严重的安全隐患。所以查找阿里云决定使用服务端签名后直传的方案。一、功能拆分视频上传组件 el-upload:<el-upload style="marginTop:-5px;" class="upload-demo" :action="ossParams.host || ''"原创 2020-10-21 17:38:46 · 550 阅读 · 0 评论 -
非父子组件通信传值——Bus.js
Bus作为一个中转站,实现非父子之间组件之间的通信,具体使用方法如下在任意位置定义bus.js:// 公共bus.js// 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果import Vue from 'vue'export default new Vue()A组件中引用bus.js:import Bus from './bus.js'export default{ components:{}, methods:{原创 2020-10-15 11:04:25 · 672 阅读 · 0 评论 -
【避坑指“难”】vue-video-player 实现Vue播放视频
vue-video-player实现很快,包含的功能也挺多,比较全面,推荐大家适用这个库。下面看看效果图:Main.jsimport VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)demo.vue <video-player class="原创 2020-10-14 15:17:51 · 854 阅读 · 0 评论 -
简单粗暴实现Element From表单限制字数
原创 2020-09-23 15:22:55 · 1806 阅读 · 4 评论 -
【避坑指“难”】el-popover 点击取消按钮,弹窗仍然无法关闭
给el-popover添加属性:ref="popover-${scope.$index}" <el-popover placement="bottom" width="200" :ref="`popover-${scope.$index}`" :visible.sync="reviewVisible" > <div style原创 2020-09-08 11:19:38 · 1600 阅读 · 3 评论 -
【避坑指“难”】Element-ui中Tabs标签禁止切换disabled的使用
<el-tabs @tab-click="handleTabs" class="el-tabs"> <el-tab-pane label="标签一" name="one" :disabled="tabOne" ></el-tab-pane> <el-tab-pane lab原创 2020-08-28 23:13:46 · 6126 阅读 · 4 评论 -
【避坑指“难”】前端如何用Vue+element实现可预览的图片墙
上传为缩略图,可点击放大图片、删除图片。<el-upload action="#" //必选参数,上传的地址 list-type="picture-card" //文件列表的类型 :limit="9" //最大允许上传个数 :auto-upload="true" //是否在选取文件后立即进行上传 :on-preview="handlePictureCardPreview" //点击文件列表中已原创 2020-08-10 16:23:10 · 1330 阅读 · 0 评论 -
【场景实现】Vue+element如何让帖子评论带上emoji,这个需求让我在富文本Quill开始了踩坑连连看
天降巨坑1:Quill富文本输入的内容提交后显示的有文本+标签到底是个啥说不明道不白的情况,来看看效果图:emm…看起来让人感觉真是怪别扭的。我也是前前后后想了很多种办法,却忽略了一种最原始的!最简单的!直接将输入的内容中的<>标签符号替换成空字符串不就完事了吗。二话不说定位一下这个发表评论的核心代码位置。先来来看看这个button:<div class="reply-btn-box" style="text-align:center"> <el-b原创 2020-07-10 18:45:45 · 2010 阅读 · 2 评论 -
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层(遮罩层)怎么破?
到底是什么问题?没错就是这样,就像上图一样,上传完图片需要预览时,图片被蒙层遮罩住了。下面是整个组件的代码:图片上传、预览、删除,组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto原创 2020-07-06 10:04:19 · 3739 阅读 · 7 评论