王博wangbo-优快云博客

原创 vue 基于Element-ui el-tree 新增、编辑、删除节点，局部刷新

效果图：项目代码结构:代码示例index.vue<template> <div class="white-body-view"> <el-button type="primary" @click="addNewRecord()">新增</el-button> <custom-tree ref="customTree" :tree-data="treeData" :tree-expand-all="treeEx

2020-11-26 23:11:53 6654 3

原创 vue + element tree 设置展开，折叠图标,设置节点前图标

效果图： 1. 设置展开，折叠图标<style lang="scss">.el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg);}.el-tree .el-icon-caret-ri...

2020-05-13 23:23:03 10020 4

原创【uniapp】解决uniapp自定义错误页面，导航栏返回失效问题

背景：因为uniapp自带的原生错误页面效果不好，就手动在hybrid/html目录下新建了error.html页面，但是突然发现导航栏返回失效，怎么点击也回不到上一页了。解决：1. 监听点击导航栏返回事件2. 捕获事件后执行uni.switchTab事件 // 开始监听backbutton事件 function startBack() { plus.key.addEventListener('backbutton', backListener, false); }

2021-08-18 15:29:35 3761 4

原创 vue element-ui Cascader 级联选择器选择任意一级选项时，可自动关闭

日常开发中，发现级联选择器如果设置为任意级别可选后，无法自动关闭，用户体验极差，所以封装了下。// 关闭级联选择器this.$refs.cascaderHandle.dropDownVisible = false完整代码：<template> <div class="white-body-view"> <el-cascader ref="cascaderHandle" v-model="value" :props="{ checkStrictl

2020-11-18 22:41:42 3710 5

原创 vue element Cascader 级联选择器解决最后一级显示空白

1.遇到的问题，级联选择器，发现每个层级的最后一层总是显示为无数据。预期效果为，当无数据时，应该不能点击展开。2. 解决思路，通过与element官网提供的数据对比后发现，当子级为空时，后台应该不返回children这一层级了，前端暂时处理下数据。 // 格式化数据源 this.options = this.formatData(data) // 格式化数据，递归将空的children置为undefined formatData(data) { .

2020-11-18 22:33:40 5310 11

原创 vue element-ui input只能输入正整数（不带小数点）

项目中遇到一些场景，只能输入正整数，而且不能携带小数点，例如年龄，物品数量等。<el-input v-model.number="input" class="input-view" placeholder="请输入内容" oninput="value=value.replace(/[^0-9]/g,'')" />1. v-model.number 自动转为数字类型2. oninput="value=value.replace(/[^0-9]/g,'')" 通过正则表达式，限制只.

2020-11-18 21:56:31 3204 4

原创码云生成SSHKey

1. 生成密钥按如下命令来生成sshkey:$ ssh-keygen -t rsa -C "test@qq.com" 然后一直回车即可2. 查看密钥$ cat ~/.ssh/id_rsa.pub3. 设置密钥打开码云设置 ==》安全设置 ==》 SSH公钥设置设置对应标题，将刚才设置的密码密钥，就完成了...

2020-11-18 21:37:50 318

原创【Vue + ElementUI】el-progress 各类常用场景（自动计算percentage，format自定义显示文字）

效果图：1. 当前数据结构progressList: [ { planNum: 150, // 计划数量 completeNum: 80 // 完成数量 }, { planNum: 70, completeNum: 70 }, { planNum: 70, completeNum: 90 }]2. 前端代码<div v-for=

2020-09-07 22:58:10 12352 4

原创 css 文字超出隐藏，显示省略号

效果图：1. 单行.text-overflow-ellipsis { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}2. 多行.text-overflow-ellipsis-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;//设置行数

2020-05-28 23:39:14 637

原创 vue 图片加载失败时，显示默认图片

背景：业务开发时遇到一个需求，在图片加载失败时，显示默认占位图片，应为以前没有接触过，所以记录下解决方式。知识点：onerror 事件会在文档或图像加载过程中发生错误时被触发。代码：<template> <div class="white-body-view"> <img :src="logoUrl" :onerror="defalutLogoUrl" alt=""> </div></template><..

2020-05-28 23:25:44 905

原创 flex 布局左侧固定右侧自适应超出内容隐藏，并保证布局效果

效果图：注意点：当右侧设置文本超出隐藏后，会影响整体页面布局，只需为右侧添加min-width数据即可。代码：以下是代码<template> <div class="main-view"> <div class="left-view">这是左侧</div> <div class="right-view"> <div class="text-overflow-ellipsis">{{ .

2020-05-28 23:16:16 3785

原创 vue 点击复制到粘贴板

背景：业务开发中遇到，点击复制内容到粘贴板的需求，记录一下效果：关键代码:copyText() { const oInput = document.createElement('input') oInput.value = this.textarea document.body.appendChild(oInput) oInput.select() document.execCommand('Copy') this..

2020-05-28 22:59:17 604 1

原创 vue 列表自动滚动到制定位置

背景：业务开发中遇到一个需求，是要求跳转到新页面，并默认选中内容，如果内容在列表的位置靠后，就需要滚动到可见范围内。实现：1. 循环实现列表，为每个item添加id,**:id="'item' + index"**,方便后续查找对应项<div v-for="(item,index) in dataList" :id="'item' + index" :key="index" class="item"> <span>item: {{ item.name }}&lt.

2020-05-28 22:39:17 3370 3

原创 vue + element checkbox-group 点击一个所有全部选中了

问题：在业务开发中，使用了checkbox-group组件，发现点击其中的一个选项后，所有数据都被选中了。原因：checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定**Array类型**的变量即可。<template> <el-checkbox-group v-model="checkList"> <el-checkbox v-for="(item, index) in typeLis.

2020-05-13 22:37:55 5240 3

原创 vue + element dialog弹框无法重置表单

遇到的现象：在业务处理中，发现先打开编辑弹框，关闭后在打开创建弹框（创建、编辑为同一个组件），弹框内会有上次打开的数据，但是在每次关闭弹框的时候重置了表单的啊！原因：form表单的重置是以页面初始值作为重置标准,如果先打开的是编辑,那么重置是以弹框打开时的数据作为标准，即表单的数据为编辑时的数据解决思路：1. 每次打开弹框时，将表单数据重置为初始化值（因为创建、编辑为同一个组件，实际业务中会多次打开，只在data中声明二次打开时不会触发）methods: { openDialog

2020-05-13 22:12:58 1573

王博的博客