随笔分类 - Vue.js
摘要：项目是vite+vue3 , 前端表格导出,使用xlsx可以导出基本表格,但是想要设置表格样式,引入xlsx-style,安装依赖,后引入报错 引用 import { utils } from "xlsx" import { write } from "xlsx-style" Could not r
阅读全文
摘要：页面打印效果图: 之前使用 vue2 用的是 vue-print-nb 现在项目是 vue3 组件用的是 vue3-print-nb 使用方法 安装 npm i vue3-print-nb --save 或者 yarn add vue3-print-nb 在 main.js 中引入 import {
阅读全文
摘要：效果图: 左侧是表格项,顶部是年份 这种适合在手机等小屏展示表格数据 后段返回的数据格式 0: {key: 2010, year: 2010, aAmount: 946, bAmount: 681, cAmount: 469, …} 1: {key: 2011, year: 2011, aAmoun
阅读全文
摘要：通过自定义属性设置,实现一个周末与工作日的不同颜色设置 效果图: 使用的属性: 自定义头部设置 headerRender 自定义日期显示 dateFullCellRender 代码: <template> <div class="box"> <h3>1.自定义头部; 2.自定义日期显示,工作日显示,
阅读全文
摘要：如下, 使用:value 给 calendar 设置默认值, 按照官方文档要求的格式, 引入 moment, 设置值 <template> <a-calendar v-model:value="date1" :fullscreen="false" @select="selectDate" /> </
阅读全文
摘要：页面空白,这样用户看到很不友好,一般会将没有匹配的页面显示一个通用的提示页面 在路由文件添加 const routes = [ { // 其他路由 path: '/home', ..... }, { // 同级位置,增加一个 404 页面地址 path: "/404", component: ()
阅读全文
摘要：在 vue3 中使用 watch 监听弹框的 visible,控制台报错警告 runtime-core.esm-bundler.js:40 [Vue warn]: Invalid watch source: true A watch source can only be a getter/effec
阅读全文
摘要：效果图: githup源码: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/demo/dragTime 一天的时间范围选择,在网上找的插件,不过大多都是新增,没有修改时的数据回显 在原来的组件上加了数据回显的处理,记录一
阅读全文
摘要：业务场景: 通过点击增加按钮,可以动态增加一列表单项,点击删除,删除此项 代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/form/mutilForm 但是 最后的提交按钮是在父页面,点击提交时,需
阅读全文
摘要：之前写了两层和三层数据的表格合并,数据处理.这种事先确定了表格的层级 如果表格的层级在一定范围内不固定,就需要动态处理了,最近研究了下,把方法记录下来 代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views
阅读全文
摘要：ant-design-vue 数字输入组件的常用校验方法 githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/form/inputNumber 这里的格式是,只能输入数字或小数, 整数部分每三位添加一个逗号
阅读全文
摘要：效果图: 代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/table/styleTable ant-design-vue 的表格有几个属性可以设置表格的样式 1. rowClassName: 可以设
阅读全文
摘要：vue3中使用 keep-alive报错 TypeError: parentComponent.ctx.deactivate is not a function 代码: <router-view #default="{ Component, route }"> <keep-alive> <compo
阅读全文
摘要：如图,左侧的菜单是动态生成的,前面的icon图标也要动态创建 实现方法: 使用vue的 createVNode 定义一个生成icon的文件: createIcon.js import * as icons from "@ant-design/icons-vue"; import { createVN
阅读全文
摘要：v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy 都是对输入的数据做过滤处理 vue 也可以自定义实现 创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写 这里的例子是在自定义v-model的实现上添加修
阅读全文
摘要：在 vue 中,form 表单输入可以通过 v-model 实现双向数据绑定,例如: <input v-model="text" /> {{text}} 在表单中输入时,页面展示的 data-text 也会相应改变 如果是封装的通用输入表单,一般会使用 prop+emit 来实现父子组件数据传递 如
阅读全文
摘要：效果图 代码: <template> <div> <div id="chart2" /> </div> </template> <script setup> import * as echarts from "echarts"; import { onMounted } from "vue"; on
阅读全文
摘要：大屏里有一个多重环形图的展示,设计图效果: echarts没有直接实现的,参考了网上的几种方法,自己修改了一下,主要分两种: 1 环形饼图重叠 2 柱形图结合极坐标系 这篇先介绍使用环形饼图实现 两种效果图: 第一种效果代码: <template> <div> <div id="chart3" />
阅读全文
摘要：vue3中使用app.config.globalProperties设置全局属性 步骤: 1. 在main.js文件中配置 const app = createApp(App) // 配置一个全局处理数据的方法 app.config.globalProperties.$filters = { for
阅读全文
摘要：树形表格数据过多时,可以使用懒加载方式获取子级数据 githup源代码地址: https://github.com/shengbid/vue-demo/tree/master/src/views/Table/asyncTreeTable 完成效果: 先加载出父级数据, 点击折叠按钮请求子级数据 代码
阅读全文
