weixin_51688981-CSDN博客

原创 vue3中过滤器的使用

当后端返回的某个字段是abc而前端需要将其渲染成ABC但你不能只直接用数组接收数据时直接改变字段值，万一其他渲染地方又需要用到小写，所以这时候就需要用到过滤器了。注意一下过滤器写的位置，它是写在data外面的，就这些了，有什么问题评论区告诉我，一定回复。现在公司开发越来越多的会用到vue3，今天给大家分享一下vue3中过滤器的使用。这是vue3中过滤器的使用，接下来补充一下vue2中过滤器的使用。这个数据是自己在前端模拟的数据，...

2022-08-11 10:18:06 6866

原创 Vue3中如何使用ref获取元素节点

在 Vue 中我们很少直接操作 DOM，毕竟 Vue 的理念是以数据驱动视图。Vue3 中通过 ref 访问元素节点与 Vue2 不太一样，在 Vue3 中我们是没有 this 的，所以当然也没有 this.$refs。代码中我们给 div 元素添加了 ref 属性，为了获取到这个元素，我们声明了一个与 ref 属性名称相同的变量。这是 ref 的基本功能之一，目的就是获取元素节点，在 Vue 中使用方式也很简单，ref 属性是 Vue2 和 Vue3 中都有的，但是使用方式却不大一样。

2023-04-12 17:21:24 1096

原创 element ui中tree组件的拖拽排序功能

这里需要用到官方文档中的allow-drop方法，（拖拽时判定目标节点能否被放置。在我们使用element ui中tree组件的时候，官方文档里面有个可以拖拽功能，接下来还需要用到官方文档中的node-drop事件，（拖拽成功完成时触发的事件）在vue项目开发中，有个需求是需要对同一层级的树节点进行拖拽排序。通过 draggable 属性可让节点变为可拖拽。然后将拖拽后的数据传给后端，完成排序。

2022-10-25 15:55:03 1542

原创 vue3项目中做全屏查看功能

如果有疑问可评论区告诉我，一定回复，一起进步哦！第一处的id为需要被全屏查看的dom元素，第一处的id为点击全屏查看按钮元素，然后在你需要实现功能的组件内引入。

2022-10-14 14:09:07 840

原创 element ui中 el-tree、el-table组件加载数据前闪现暂无数据清除或修改

我们在使用element ui组件时， el-tree、el-table组件加载数据前会显示一个“ 暂无数据 ”，体验很不友好，我们可以将“暂无数据”修改为“正在加载中”或者直接清除；利用el-tree 自带的empty-text属性绑定一个初始化空值，在发送接口请求前先赋值为“正在加载中”当拿到tree数据时判断数据长度，当数据长度为0时设置emptyText值为"暂无数据"即可......

2022-07-08 15:51:06 4015 1

原创 vue3中element时间选择器做限制

代码如下，自定义方法（我自定义可选时间范围是距今天一个月之内可选，今天之后的日期和距今天一个月之前的日期都不可选），根据自己需求自定义可选时间。现在vue3的使用越来越广泛，今天有一个需求是对element组件中日期选择器的可选日期做限制。// 只能选择当前时间的前一个月的和当天之前的。可以自定义默认时间，我写的默认时间是今天。没有做限制之前是所有日期都可选，效果如下。有问题评论区告诉我，一定回复，一起进步！灰色部分的日期都是不可选的。做了可选日期限制之后是。代码可直接复制看效果。

2022-06-21 17:36:10 2603 7

原创 echarts常用属性详解

1.grid配置项：图标离容器的距离show:是否显示直角坐标系网格-----------值:true?falseleft:图表离容器左侧的距离-----------------值:number?百分比top:图表离容器顶部的距离-----------------值:number?百分比right:图表离容器右侧的距离---------------值:number?百分比bottom:图表离容器底部的距离------------值:number?百分比backgroundColor:网格背景色-------

2022-06-15 15:37:57 3600