- 博客(187)
- 收藏
- 关注
RSS订阅转载 vue安装swiper3 vue-awesome-swiper@3实现图片列表缩略图双向控制效果
接下来重头戏js，在给予swiperOptions属性之后，在实现双向控制时一定要写在updated里面，有两点原因：1、mounted里打印console.log(this.$refs.swiper1)为undefined,所以实现进行不下去。swiper,这样写法是swiper高版本的，我们安装的是vue-awesome-swiper3.多版本的，支持的是this.下面css代码写好样式，像这样要修改非原生的组件样式，要写到单独的。另外还有一点要注意的是，在我查资料的时候，很多写的是this.
2024-04-12 16:48:00
26
原创 由elemnent-ui模拟一个全选、反选效果想到的购物车逻辑案例
本文参考 https://blog.csdn.net/sumimg/article/details/137508302?点击店铺二级的时候，checkedCities的值已经在数组里面了 ，但是页面却没有更新。重新赋值，使用$set解决。
2024-04-08 14:53:36
344
转载 由elemnent-ui模拟一个全选、反选效果想到的购物车逻辑案例
提一点的是：真实的项目中对于每一个商品，勾选它呈现的状态后端是不可能给我们这个状态值的。这里还有一点要注意的是：checkbox的checked属性为true的时候，必须让其indeterminate的状态为false。要么是-横线，要么是√。3 每个商家店铺里的商品在勾选的时候，逐一勾选直到全部勾选，当前商家店铺前的复选框会勾选，当此操作依次进行，所有商家店铺前的复选框都勾选时，最顶层的复选框实现全选，反之状态变更为-（1）el-checkbox-group绑定的是数组，记录了当前组里当前勾选的集合。
2024-04-08 14:45:11
14
转载 CSS3中的display:grid网格布局介绍
注意：设置为grid后，子元素的float,display: inline-block,display: table-cell、vertical-align和column-*等设置都将失效。grid-auto-flow：划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。grid-template-rows：定义每一行的行高；
2024-03-11 16:39:49
142
转载 js实现一维数组转化为二维数组两种简单方法
如果索引为奇数，则返回一个空数组。用 flatMap 方法来简化将数组 [160, 20, 179, 10, -170, -20] 转换为 [[160, 20], [179, 10], [-170, -20]] 的过程。使用 JavaScript 的循环和 slice 方法来将数组 [160, 20, 179, 10, -170, -20] 转化为 [[160, 20], [179, 10], [-170, -20]]。可以看到，使用flat方法的默认参数Infinity，直接把多维数组转换成了一维数组；
2024-02-21 14:42:01
149
原创 vue实现滚动加载
本文参考 ： https://blog.csdn.net/wytraining/article/details/122543795。每次在请求完成数据的时候去判断一下当前的 page × pagesize是否已经大于等于接口返回的total值就行了。a.需求：一个页面存在多个表格，但只需对其中的部分表格实现滚动加载。根据plugin-id去获取到对应的表格需要滚动的部分。3.完整的js（给表格加入滚动监听+分页信息的处理）给每个需要滚动加载的表格加入一个plugin-id。2.js（给表格加入滚动监听）
2024-02-20 16:29:42
383
转载 ELEMENT-UI 日期控件遇到了表单验证出错（ERROR IN EVENT HANDLER FOR “EL.FORM.CHANGE“: “TYPEERROR: VALUE.GETTIME IS N
{ type: ‘date’, required: true, message: ‘请选择日期’, trigger: ‘change’ }表单验证将 【type: ‘date’】改为【type: ‘string’】`elementUI的日期选择器【el-date-picker】在加上格式。
2024-01-05 14:21:54
117
转载 element表格表头斜杠，让你的数据更有条理
在 web 开发过程中，经常需要使用表格来展示数据。而表头作为表格的重要组成部分，对于数据展示和信息传达起着至关重要的作用。但是，在实际开发中，我们可能会遇到一些特殊情况，比如表头需要显示斜杠。这种情况下，该如何解决呢？本文将为大家介绍解决该问题的方法，帮助你轻松应对这类表格显示需求。效果图。
2024-01-05 14:20:23
164
转载 HTML、CSS表格的斜表头设置
先看效果：一、先准备一个普通的表格如果觉得麻烦也可以通过这个链接，快速生成表格样式，直接复制代码即可二、给第一个格子加两个span元素然后给oline这个类加样式即可但是这种相当于是用背景色做的斜线效果，如果不喜欢的话，还可以用svg的形式这里面的stroke是可以设置颜色，支持16进制颜色编码，修改颜色后，重新base64加密替换原来的加密代码即可。JavaScript原生转换方法：atob()：解码一个Base64字符串;
2024-01-05 14:18:03
150
转载 Element ui表格行、列拖拽
1、首先安装vuedraggable插件或直接安装sortablejs3、在需要配置的页面引入4、要点：4.1、先找到拖拽元素的父容器4.2、行拖拽：在 el-table 标签中，根据行的内容指定行的唯一标识 row-key=“id”4.3、列拖拽：额外定义两个数组，分别存储拖拽前的列顺序和拖拽后的列顺序。
2024-01-03 09:45:55
412
转载 css实现table表头和列固定功能
项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。高度要自适应（table默认支持）
2023-12-15 15:24:46
451
原创 vue 图片分辨率等比例缩放上传
使用elementUI组件不能使他自动上传，主要功能是上传最左边的图片。我根据这篇博主的分享，写下了我的循环上传的分辨率等比缩小。功能：点击+号，新增一项，点击- 号 删除一项。
2023-12-14 09:54:05
1017
1
转载 el-table表头文字换行的三种方式
三种方式各有特色，但是render-header会略为耗费一点点性能。若为固定表头数据，则优先推荐使用表头插槽方式，其次推荐换行符加css方式。若为动态数据，则只能使用表头renderheader函数了若有更好的方式，欢迎交流本文章转载自 https://zhuanlan.zhihu.com/p/431976392?utm_id=0。
2023-12-07 09:32:19
238
转载 Vue+Element UI Upload 组件 上传单张图片去除后面的+号
我是在钩子函数 上传中、上传成功、上传失败、预览这些地方进行控制。这样在上传中那个"+"号也可以马上隐藏。这个思路是隐藏 el-upload–picture-card”
2023-12-06 10:14:58
379
1
原创 echerts 循环图 显示获取不到id
1，我在循环方法的时候 id没有从0开始，把id变成从0开始循环。2，设置myChart 全局属性。html 动态绑定id。
2023-12-06 09:45:07
538
转载 elementUI table组件，数据筛选设置默认值 ，filtered-value 的用法
项目最近使用到了elementUI,网上找的都是vue的版本，根据文档，现在使用的jqery+elementUI table，用到了过滤器，关于默认值 filtered-value 的用法，网上怎么都找不到，翻墙找到了用法，记录一下；:filtered-value=“[‘默认筛选的值’]”
2023-12-04 12:06:48
753
1
转载 vue element ui table过滤器筛选设置为单选
element ui table 过滤器默认是多选的，现在需要的功能是单选，所以需要设置一下。这里是通过filter-multiple来控制多选还是单选。filter-multiple为false则是单选，如果是true是多选。
2023-12-04 12:06:07
333
转载 关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
我们先看一下elements的设置前后结构变化对比;主要看 el-table__body-wrapper。所以原因很明显了，我们之前只是设置了.el-table__body-wrapper 的浮动颜色。可以看出多出了 绿色框中的内容，再去看看绿色框中的内容就是固定的列；如果添加了fixed 上面设置的鼠标悬浮颜色可能一部分无效了。解决方法2：经1楼指教 第二种解决方法 更加完美。table 鼠标悬停时高亮背景颜色的修改。解决方法1：继续添加css。
2023-12-04 12:00:17
1541
1
转载 【ElementUI】el-table对象数组嵌套对象数组
此时需要处理一下，可以在data中使用新的数组来作为label，使得内层数据可以同行显示。代码如下，另外加一个columnIndex数组，用来存储数据里面的属性的key。效果图：可以看到，monthData里面的数据也渲染到表格里面了。
2023-12-04 11:57:21
803
转载 ElementPlus upload组件限制上传一个文件，重新选择替换原来文件
【代码】ElementPlus upload组件限制上传一个文件，重新选择替换原来文件。
2023-10-17 15:10:53
1386
转载 【vue3】setup中数组数据变化页面不渲染
此时用到的版本是vue: 3.2.13，目前已修复此问题。——2023.3.24 修改。点击按钮后，数组发生了变化，但是页面不渲染。点击按钮后，数组发生变化，页面重新渲染。
2023-10-13 17:25:51
701
原创 vue2+elementUI，vue3+elementPlus解决form中的下拉列表回写显示id，不显示label
这是我自己实验出来的代码，效果是好的，如有不足或者有更好的方法，欢迎指正探讨。直接字符串转数组，转出来的类型是 [‘1’,‘4’,‘3’,‘2’]需要把数组中的字符串转成数字类型 [1,4,3,2]，使用。vue3中表单的回写方式如下：（不是写在一起，单独排列开）但是elementplus中需要的是数字类型的数组。后端给的数据是字符串类型的 1,4,3,2。
2023-10-10 16:47:07
1484
原创 vue3 +elementplus | vue2+elementui 动态地通过验证规则子新增或删除单个表单字段
效果图点击 ‘+’ 新增一行，点击‘-’ 删除一行。
2023-09-27 10:19:39
827
转载 Vue3父子组件相互调用方法（setup语法糖）
子组件需要使用defineExpose对外暴露方法，父组件才可以调用！今天的分享就到这里啦~~如有错误，欢迎随时雅正。
2023-09-21 15:15:36
947
转载 vue3 父子组件间通信
在vue3中 可以使用provide和inject进行跨组件通信，那么是否可以用来替代父子组件间的通信模式？如果不能，是什么原因，如果可以，又是因为什么？语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问。跨组件传值： 子组件调用父组件的函数：传递方法（谁的数据 谁负责修改）4.Pinia产生的Store如何解构赋值数据保持响应式?storeToRefs的作用，保持数据的响应式结构。1.Pinia是用来做什么的?跨组件传值： 传递普通变量。
2023-09-21 15:13:06
103
转载 pinia详细使用步骤（0基础）
在Vue3中的所有东西似乎都可以用一个函数来表示，pinia也是延续了这种思想。pinia无非就是以下3个大点：stategettersactions当然这只是基础使用部分，适用日常大部分普通开发。其余深入学习，比如插件、订阅等等，移步官网：pinia官网。
2023-09-21 14:49:13
122
转载 element-ui之el-table利用多选实现单选效果
demo中版本element-ui版本为: “^2.15.12”）在element-ui中是为我们准备好了可直接使用的单选与多选属性的。但是单选与多选的形式不一样，在某些情况下我们可能想让它们的选择方式尽量统一，于是我想能不能把利用多选属性实现多选，并用一个变量来控制表格是多选还是单选。要实现单选有两步：一、隐藏多选选择框。二、每次选择只能选择一个。
2023-09-13 15:56:53
1738
转载 VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。
是在这位大佬这边看到的解决方法：https://blog.csdn.net/m0_48721669/article/details/118941638?file文件中直接存储有图片名字、大小和类型，如果不需要判断尺寸只用picchange即可，我这里是直接把判断宽高比的操作提出来了。JS：（其中uploadlogo须在data中声明，存储图片文件，这是提交表单时所需要传参的数据）判断图片的宽高的操作利用了JavaScript的原生API FileReader。3）上传图片的宽高比例为2：1。
2023-09-08 13:27:07
960
转载 vue+elementUI 上传图片时压缩图片
项目中由于后台接口的原因，写了两种上传方式1.自动上传2.手动上传针对这两种方式，记录下，如何压缩上传图片。
2023-09-07 10:04:08
494
1
原创 vue中v-for循环数组使用方法中splice删除数组元素（错误：每次都删掉点击的下面的一项）
总结：平常使用v-for的key都是使用index，这里vue官方文档也不推荐，这个时候就出问题了，我们需要key为唯一标识，这里我使用了时间戳（）处理比较复杂的情况，
2023-09-06 15:25:46
969
原创 vue+elementUI el-select 自定义搜索逻辑（filter-method）
下拉列表的默认搜索是搜索label显示label,我司要求输入id显示label名称。使用filter-method方法筛选数据。首先mounted加载数据。
2023-09-05 15:12:58
2568
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人