效果图：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...

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

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

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

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

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

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

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

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