vue
笑一个吧66
广交互联网之友
展开
-
2021-07-14
el-table组件在flex元素的包裹下,出现表格项宽度无限变宽问题在开发vue项目时,出现父元素使用了flex布局,嵌套 el-table组件的时候。在客户的电脑出现表格项宽度无限延长问题。如下截图:正常显示界面如下图:解决问题只需在包裹元素上,添加样式代码 overflow:hidden即可解决问题。如下代码: <el-row style="display:flex;overflow: hidden;"> <el-table class="tablehe原创 2021-07-14 15:24:37 · 201 阅读 · 0 评论 -
2021-07-14
vue项目实现表格文字溢出和文字提示我这里采用的是饿了么团队,开发的element-ui组件库正常情况下只是单元素的时候,只需要在el-table-column组件中添加属性show-overflow-tooltip就可实现,如下代码:<el-table-column label="商品名称" width="200" align="center" show-overflow-tooltip prop='itemName'>&原创 2021-07-14 11:50:41 · 163 阅读 · 0 评论 -
vue项目下载zip压缩包代码
首先客户有个需求,需要将文件压缩一下,下载后端返回我一个编码的base64的字符串接下来是前段进行处理的代码,如下:**首先第一步封装一个处理方法**function basecodeBlob(base64Data,contentType){ let decodebase64 = window.atob(base64Data) let cacheData = new ArrayBuffer(decodebase64.length) // 缓存区数据 如下图:ArrayBuffer()方法原创 2020-08-27 10:39:18 · 2404 阅读 · 0 评论 -
vue实现文档导出功能
vue实现文档导出下载的功能,后端返回文档流数据,前端将这个文档流利用Bolb技术来处理下载’ **第一步调用接口,我这里是将接口封装调用的** **responseType: `arraybuffer` //响应类型一定要写 ** this.$http.rules.exportTemplate( {responseType: `arraybuffer`}).then(res=>{ console.log(res) // 可以输出一下,看一下后台返回的结果数据 if原创 2020-08-14 10:35:40 · 490 阅读 · 0 评论 -
elementui中插件el-tree点击选中背景色的自定义
<el-aside> <el-tree :highlight-current='true' default-expand-all :expand-on-click-node="false" :data="tableDatas" :props="defaultProp" @node-click="handleNodeClick">...原创 2020-08-11 17:13:34 · 2824 阅读 · 0 评论 -
关于VUE项目根据后台返回的手机号和身份证号做正则校验
首先将后端返回的数据取到我的后端数据是通过事件去回调得到的 // 触发****按钮 handleEntry (type, item, title) { //将获取到手机号和身份证号数据赋值给变量方便后续使用 const a = item.mcPartyPerson.idcard const b = item.mcPartyPerson.phone // 手机号正则表达式 var regphone = /(^1\d{10}$)|(^[0-原创 2020-06-24 15:17:16 · 597 阅读 · 0 评论 -
vue项目实现用户扫二维码实现支付功能
首先第一步是需要在命令行里面下载安装一个生成二维码的插件qrcodejs2,代码如下:npm install qrcodejs2 -S第二步封装一个组件:模板如下代码:<!-- 微信二维码 --><template><div class=''> <el-dialog title="微信扫码支付" :visible.sync="dialogData.dialogVisible" width="20%"原创 2020-06-19 15:50:40 · 5046 阅读 · 2 评论 -
vue项目支付宝支付功能
第一步需要在vue模板里写一个div标签,如下代码:<div v-html="content"></div>指令 v-html可以显示并接受后台返回的HTML代码片段在数据定义一个content的属性,方便向后端请求接口数据时将需要的值赋值给content属性,如下图:后端返回的form数据格式如下代码:<form name="punchout_form" method="post" action="https://openapi.alipay.co原创 2020-06-19 15:35:44 · 1502 阅读 · 2 评论