- 博客(15)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 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
6453
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 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
9297
2
原创 【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
3520
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
3592
5
原创 vue element Cascader 级联选择器 解决最后一级显示空白
1.遇到的问题,级联选择器,发现每个层级的最后一层总是显示为无数据。预期效果为,当无数据时,应该不能点击展开。2. 解决思路,通过与element官网提供的数据对比后发现,当子级为空时,后台应该不返回children这一层级了,前端暂时处理下数据。 // 格式化数据源 this.options = this.formatData(data) // 格式化数据,递归将空的children置为undefined formatData(data) { .
2020-11-18 22:33:40
4754
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
3125
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
284
原创 【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
11854
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
590
原创 vue 图片加载失败时,显示默认图片
背景:业务开发时遇到一个需求,在图片加载失败时,显示默认占位图片,应为以前没有接触过,所以记录下解决方式。知识点:onerror 事件会在文档或图像加载过程中发生错误时被触发。代码:<template> <div class="white-body-view"> <img :src="logoUrl" :onerror="defalutLogoUrl" alt=""> </div></template><..
2020-05-28 23:25:44
871
原创 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
3621
原创 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
568
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 }}<.
2020-05-28 22:39:17
3202
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
4848
3
原创 vue + element dialog弹框 无法重置表单
遇到的现象:在业务处理中,发现先打开编辑弹框,关闭后在打开创建弹框(创建、编辑为同一个组件),弹框内会有上次打开的数据,但是在每次关闭弹框的时候重置了表单的啊!原因:form表单的重置是以页面初始值作为重置标准,如果先打开的是编辑,那么重置是以弹框打开时的数据作为标准,即表单的数据为编辑时的数据解决思路:1. 每次打开弹框时,将表单数据重置为初始化值(因为创建、编辑为同一个组件,实际业务中会多次打开,只在data中声明二次打开时不会触发)methods: { openDialog
2020-05-13 22:12:58
1514
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人