vue3使用 xlsx-js-style导出Exce 动态合并表头 xlsx-js-style相当于xlsx的生基本,xlsx导出不能对单元格样式进行调整。安装了xlsx-js-style 就不需要安装 xlsx了。动态合并列 导出excel。完整代码 vue3。
vue3-print-nb实现打印pdf分页 通过class="paging"的容器进行分割,考虑到每张A4纸高度固定,所以通过判断每个class为paging的容器高度累加,大于纸张高度时,就给上一个class为paging的容器加上style=“page-break-pageBreakBefore:always”,id值为js对象中的id值,在打印弹框里的打印按钮设置自定义属性v-print,该属性值为打印区域的对象。对象配置方式——在js中定义一个对象,对象中可配置打印区域相关属性,在需要打印的单据内容最外面的div。这里使用的是对象配置方式。
vue3+vite+ts+pinia+router4后台管理-动态路由生成 实现思路1.在路由钩子里面判断是否首次进入系统(permission.ts)2.判断token是否有值。没有值回到登陆页面,3.token有值判断MenusList是否有值,没有则获取路由4.解析路由,拼接路由,放行路由。
基于vue3 + ant-design 使用阿里图标库iconfont.cn 对于使用 iconfont.cn 的用户,通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段,symbol 生成链接粘贴进去即可。即可轻松地使用已有项目中的图标。组件封装 IconFont。
Ant design Vue3 中的 a-select 组件使用方法详解 placeholder 只有在 value = undefined 才会显示,对于其它的 null、0、‘’ 等等对于 JS 语言都是有意义的值。使用 change方法 该方法有俩个参数 value option(选中当前的对象的所有数据)正常选中的时候 只会获取到value值 如果要获取该数据的其他数值, 例如 id name 等等。a-select 搜索时过滤对应的 option 属性的value。组件中返回值为value和label的List可直接使用搜索。好了XDM,bye~~~
vue3 echarts 堆叠柱状图动态多柱堆叠 在使用echarts堆叠柱状图的时候,常规堆叠柱状图每条柱子的堆叠种类是相同的,实际开发中可能存在不同的数据格式,此处以地区结合材料进行说明,例如 华南地区包含材料(金,银)华北地区包含(铜,金)这样就会出现数据出现差异的情况,echarts现有的堆叠柱状图无法满足需求,需要去手动转换数据。
VUE3 兄弟组件通 1、兄弟组件通信:可以先把值传给父组件,再通过父组件传给另一个子组件,就做到了兄弟组件的传参,但是问题就是及其麻烦,所以引出第二种方式。2、通过消息的发布订阅来实现,定义一个bus(可实现任意组件通信)如果此时A组件发送了多个事件,B组件可以用*接收,写法如下。该方法不仅方便,且可以实现任意组件通信,极其方便实用!该方法不仅方便,且可以实现任意组件通信,极其方便实用!现在来使用刚刚定义的bus,将A组件的值传递给B组件。引入完成,使用方式和手写的基本一致,只不过名字不同。这样就完成了一个兄弟组件的传参。
qiankun 微前端应用实践 qiankun这个库只需要在基座引入,在main.ts 中注册子应用,为了方便管理,我们将子应用的配置都放在:/src/qiankun.js下。主应用注册这个路由时给 path 加一个 *,注意:如果这个路由有其他子路由,需要另外注册一个路由,仍然使用这个组件即可。基座采用是的 Vue3 + vite + ts,只负责导航的渲染和登录态的下发,为子应用提供一个挂载的容器div,由于路由模式为history,需要匹配子应用的入口规则,修改src/router/index。然后在src/main.ts中引入。
vue3 antd 自定义切换主题色 主题切换组件 theme.vue 在layout组件里使用。vue3 antd 自定义切换主题色。maints引入antd css。切换颜色hook文件 统一管理。在appvue里使用。
antd-vue 表格关闭弹窗重置表格搜索条件 clearFilters参数是antd自带的清空输入框内容的方法,定义一个变量把clearFilters赋值给这个变量clearTabSearch,在弹窗取消或者关闭的的时候调用清除表格搜索框得方法。
vue2后台管理项目动态加载路由 后台管理系统项目中的路由需要权限管理,不同的角色登录看到的页面是不一样的,所以路由应该是后端动态返回,然后前端拿到路由表进行处理后调用router.addRoutes([])添加到前端的静态路由表中形成完整路由表。
antd table 固定列之后滚动条无法拖动 使用a-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动。解决方法将固定区域底部留出一个滚动条高度的距离。主要的问题就是固定区域盖住了横向滚动条。设置bottom值,使得不盖住滚动条。可以使用下面配置来解决。...