辞忧*的博客

通过css改变element ui的el-tree原有样式，并将子级与父级之间展开行添加连接线，层级之间添加斑马线效果。

功能描述：页面需要实时接收后台返回的最新数据并在页面展示，使用webSocket进行消息轮询和接收。

页面内容展示

使用前按需引入，可使用npm或者cdn连接，功能示例使用cnd在index.html中引入。

【代码】基于element ui的el-drawer进行组件封装。

随手记：当form表单被组件引用在table循环中并length大于1时，每次点击保存，$emit方法在form的下标0传回时就执行了保存造成报错，特用防抖来解决。防抖防抖本质上就是优化高频率执行代码的一种手段；n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时；可以通过 setTimeout 实现；demo实现<template> <el-button @click="thesubmit">提交</el-button> <el-ta.

随手记：table表格在vue中的单选、单行求和问题。html<el-table :data="tableData" border style="width: 100%">// 单选<el-table-column width="60px" align="center"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.checked" @chang.

随手记：table表格引用官网自定义总价功能html 主要用到 show-summary 表尾显示合并行 和 summary-method 自定义计数方法。<el-table :data="tableData" border style="width: 100%" show-summary :summary-method="getSummaries">....</el-table>js 进行自定义方法的定义methods: { getSumm.

记录下自定义日期选择器，需求开始时间不超过当前日期并且不大于结束时间，结束时间不小于开始时间。存在两个日期选择器主要使用disabledDate来限制禁用状态<div class="cards"> <div class="header">账户明细</div> <div class="content"> <el-form ref="form" :model="form" label-width="120.

通过 vant 的 Checkbox 来进行列表数据的选择，需求单选、多选、下拉加载、最多选中功能了解：Checkbox 可搭配 CheckboxGroup 进行选中和非选中状态切换使用到的参数 max（最大可选）、@change（当绑定值变化时触发）van-list 无限加载功能未选中按钮置灰，选中按钮可点击触发事件html<template> <div class="advance"> <div class="item-box"> .

使用 vant 组件库封装可复用组件，主要展示Dialog 弹出框。此只使用父子传值方法，也可使用 vuex 等。达成目标：父组件点击按钮触发子组件功能（可复用）。需求：1. 可自由传值。2. 需要避免子组件直接更改父组件状态造成报错。思路：因封装组件为弹框，可默认子组件为显示状态，父组件通过 v-if 来判断是否需要显示隐藏，子组件点击事件可通过$emit方法传值给父组件，通过自定义方法来进行显示隐藏等。父组件<template> <submitHint .

应项目需求，为避免代码重复，耦合性高，使用 vue + vant UI 来进行公共代码封装。本次封装头部标题区块。目标样式创建目录在src / components / 创建 headTips 文件封装组件html – headTips/index.vue<template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> &lt.

避免切换速度过快显得突兀，在不使用 a 标签以及添加 class类 进行锚点操作时，这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。定义scrollTo(xpos,ypos),包含两个必须属性xpos（指定滚动到X轴指定位置）ypos（指定滚动到X轴指定位置）使用：// 滚动到指定位置window.scrollTo(100,500)scrollTo(options)，包含三个必须属性top (y-coord) 相当于y轴指定位置left (x-coord) 相当.

本次主要是使用vue+element UI来完成对账单功能的实现，需求是当前时间及之前一天不可点击，大于当前日期置灰不可点击。模板简陋敬请谅解 …先上效果图vue页面布局方便数据渲染<template> <div class="download-box"> <div class="block"> <el-date-picker value-format="yyyy-M" v-model="val.

echarts图表会在页面加载时绘图，但是在tab选项卡中如果进行切换，第一个选项卡的echarts样式就会失效，宽度会默认变成100px。查明原因后发现是因为tab切换时会添加display: none; 属性，使当前echarts拿不到当前元素造成这种原因解决方法只需要 autoresize 这个属性就可以判断实例是否需要自动进行重绘 <v-chart :options="setDatas" autoresize style="height: 195px" />.

vue中监听浏览器宽度变化及跨域处理本文主要做笔记防止遗忘，需求是页面自适应浏览器大小展示不同数量数据浏览器事件通过 document.body.clientWidth 来获取到浏览器的宽，然后通过 window.onresize 来监听浏览器窗口的变化在vue.js中先在data中定义自定义属性data() { return { screenWidth: document.body.clientWidth, // 获取浏览器宽度 }; },...