2023年5月5日

el-select数据太多造成页面卡顿？el-select实现触底加载

摘要： 当我们使用el-select下拉框的时候，会遇到后端放回的数据太过庞大（成千上万条），导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗，避免页面卡顿。 思路：这时候我们可以利用vue的自定义指令，监听到他的下拉滚动事件，当滚动到最后时，（下拉宽高度+可滑动高度距离底部的距 阅读全文

posted @ 2023-05-05 14:32 久居我梦 阅读(1266) 评论(0) 推荐(1) 编辑

2023年4月21日

js实现输入打字效果

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2023-04-21 17:02 久居我梦 阅读(178) 评论(0) 推荐(0) 编辑

2023年2月23日

父盒子的margin继承了子盒子的margin值，如何解决该问题

摘要： 1.修改父元素的高度，增加padding-top样式模拟，例如【padding-top: 1px;】。 2.为父元素添加【overflow: hidden;】样式即可（完美）。 3.为父元素或者子元素声明浮动，例如【float: left;】。 4.为父元素添加border，例如【border: 1 阅读全文

posted @ 2023-02-23 10:14 久居我梦 阅读(39) 评论(0) 推荐(0) 编辑

2023年1月9日

瀑布流布局

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2023-01-09 14:31 久居我梦 阅读(25) 评论(0) 推荐(0) 编辑

2022年10月29日

扁平数组转树结构

摘要： <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <l 阅读全文

posted @ 2022-10-29 09:25 久居我梦 阅读(15) 评论(0) 推荐(0) 编辑

分页组件自定义props

摘要： <template> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes" :page-size="pageSiz 阅读全文

posted @ 2022-10-29 09:16 久居我梦 阅读(13) 评论(0) 推荐(0) 编辑

2022年10月12日

element-ui的form表单验证如何给动态的prop

摘要： <template> <el-form :model='queryForm' ref='queryForm'> <div v-for="(item,index) in queryForm.tags"> <el-form-item :prop="`tags[${index}].name`" :rule 阅读全文

posted @ 2022-10-12 10:46 久居我梦 阅读(650) 评论(0) 推荐(0) 编辑

如何让input框只能输入正整数和0

摘要： 工作中当我们写完了一个表单后,可能会有这样一个需求：input框只能输入正整数和0，下面代码可以帮助你解决问题！ <el-inut v-model='num' @input='handleInput'/> methods:{ handleInput(){ this.num = this.num.re 阅读全文

posted @ 2022-10-12 10:33 久居我梦 阅读(191) 评论(0) 推荐(0) 编辑

2022年8月16日

el-checkbox遍历的的时候如何使用

摘要： <template> <div class="checkBox"> <template v-for="item in checkedCities"> <el-checkbox :key="item.id" v-model="item.isCheck" @change="handleCheckAllC 阅读全文

posted @ 2022-08-16 21:44 久居我梦 阅读(591) 评论(0) 推荐(0) 编辑

2022年6月15日

props双向绑定？v-bind.sync=''

摘要： <template> <div> <children v-bind:title.sync="title"/> </div> </template> <script> export default { data(){ return{ title:"学习vue" } } } </script> 子组件: 阅读全文

posted @ 2022-06-15 14:55 久居我梦 阅读(67) 评论(0) 推荐(0) 编辑

导航