- 博客(22)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 css文字超出长度省略号显示
css文字超出长度省略号显示话不多说直接上代码，即拿即用/* 多行文字省略 */ .course-name{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /* 这里修改行数,如果两行省略把数字改为2 */ -webkit-line-clamp: 1; -web
2022-02-16 15:53:00
534
原创 金额等数字保留两位小数并且自动补零和小数转为百分数
金额等数字保留两位小数并且自动补零和小数转为百分数前端从后端接收的值往往需要保留几位小数或转为百分数，下面例子是将表格中接收来的数值处理好展示在页面html代码<el-table :data="gridData" max-height="500"> <el-table-column prop="params1" label="MSRP" header-align="center" align="center" width="120"> <template s
2021-11-25 20:10:01
550
原创 css3实现鼠标悬浮图片放大效果外框固定
css3实现鼠标悬浮图片放大效果外框固定示例实现几行代码写出鼠标在图片上方停留，图片通过过渡效果放大，增强界面交互体验感。关键代码-html<div class="rightL2_isclick" @click="setNavBarHander(item.id)" title="点击进入tableau报表"> <img style="width:100%;height:100%" :src="item.imgUrl" alt /></div>关
2021-11-23 16:25:43
1289
原创 对象的属性名设置为变量，可以接受不同值
//定义变量dictType、amountdata() { return { dictType：'name', amount: 'varda' }; }, //定义一个对象，第一个属性名为id，第二个属性名为一个变量，可接受数据的绑定let params = { id: 1, [`${dictType}`]: amount, //这里使用上面定义的变量 };变量 dictType可以用来接受不同的值用作为p
2021-07-08 14:02:28
834
原创 防抖debounce
应用场景:防止快速连续的点击事件和不可控的高频点击问题，常用于数据提交至后端，防抖函数阻止了一次发送多次请求的失误。具体实现代码：代码一：export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timest
2021-06-09 14:26:08
115
原创 setTimeout()方法的使用
setTimeout()方法的使用使用方式：该方法用于在指定的毫秒数后调用函数或计算表达式。例一：function showData(){setTimeout(() =>{ let exportType = '1'; console.log('exportType',exportType) },500) };showData();exportType将会被延迟500毫秒后打印在控制台。例二：function load(){
2021-06-07 17:18:17
1838
原创 vsCode好用又实用的插件
vsCode好用又实用的插件最近重装了一次vsCode，之前常用的插件又重新安装了一遍Chinese (Simplified) Language Pack for Visual Studio Code作用：汉化插件，将编译器文字转为中文Beautify作用：文档格式化，将代码格式调整，一键调整当前文件的所有代码的排版，整齐好看Vue VSCode Snippets代码提示插件Auto Close Tag作用：自动添加结束标签，写标签时自动补上结束标签Auto
2021-05-24 16:51:56
171
2
原创 获取当前年份
定义个变量获取当前年份data(){ return { year: new Date().getFullYear().toString(), } }
2021-05-20 10:56:22
414
1
原创 安利些前端开发过程中比较好用的网站
安利些前端开发过程中比较好用的网站：GitHub-https://github.com/codepen.io-网页特效-https://codepen.io/爱给-音效-https://www.aigei.com/jQuery-插件库-https://api.jquery.com/Iconfont-阿里巴巴矢量图标库-https://www.iconfont.cn/zhongguose中国传统色彩搭配-http://zhongguose.com/flatuicolors-调色板-https:/
2021-05-19 15:16:55
137
原创 element表格指定列的内容修改
element表格指定列的内容修改实现效果：当双击表格中该列内容的任何一个表格项时，弹出框修改这一项，并且传给后端。组件：el-table和el-dialog实现思路：表格中绑定cell-dblclick事件（当某个单元格被双击击时会触发该事件）定位到该列，并且弹出弹出框实现修改代码：<el-table v-loading="dataListLoading" :data="dataList" ref="multipleTable"
2021-05-19 13:31:23
1472
原创 vue 实现计时器获取当前日期和时间
vue 实现计时器获取当前日期和时间首先简单介绍Window 的 setInterval()方法和 clearInterval()方法：setInterval() 函数会每秒执行一次函数，使用clearInterval()方法来停止执行。第一步：定义个变量接受时间值，挂载到DOM元素上。<div class="time">{{ nowTime }}</div>第二步：在data里面定义这个变量。data () { return { timer: ''
2021-05-11 17:48:57
1304
原创 vue el-table的列表滚动，单张表的表头固定内容滚动
vue el-table的列表滚动，单张表的表头固定内容滚动使用场景：当需要表格内容循环滚动显示时。做了优化的点： 1.单张表实现滚动。2.滚动的高度随着窗口高度自适应。3.鼠标悬浮表格内停止滚动。代码：首先需要将表格用ref绑定一个值名通过this.$refs.值名来获取,定义个tableHeight获取高度。<el-table :data="islist" ref="table" :max-height="tableHeight" @cell-mouse-enter="mouseover
2021-05-10 14:46:32
3035
1
原创 vue 表格中的数据换行识别html符号
vue 表格中的数据识别html符号<el-table-column prop="code" label="" header-align="center" align="center" ><template slot-scope="scope"> <div v-html="scope.row.code"></div></templ
2021-04-15 11:46:27
954
原创 vue固定表头动态监听窗口大小，表格高度自动调整
vue固定表头动态监听窗口大小，表格高度自动调整适用背景：当页面数据很多，limit改为20，50，100时，下滑列表需要看到数据与表头数据项对应，且高度随着浏览器的窗口高度自适应：1.需要表头固定2.table的高度随窗口大小自动变化步骤：第一步，需要固定表头，element组件中固定表头的属性是height而我们需要动态变化高度，就要用到 流体高度max-height属性替代这个height代码： <el-table v-loading="dataListLo
2021-04-14 14:48:25
1549
原创 使用a标签时不用href=““调转页面
使用a标签时不用href=""调转页面使用场景：当需要用到a标签，又不想跳转页面情况。示例：<a href="" @click="queryInfo()"></a>此时，我只想用a标签和单击的queryInfo()方法两种处理方式：<a href="javascript:void(0)" @click="queryInfo()"></a>或者<a href="#" @click="queryInfo(); return false"
2021-04-10 13:55:27
1087
原创 VSCode项目打包步骤
VSCode项目打包步骤找到项目的vue.config.js文件查案项目的配置2.在终端运行命令：npm run build3.list文件就是打包好的项目
2021-04-08 21:15:37
12386
原创 el-input的type=“number“ 隐藏上下标和禁止鼠标滚轮滚动
el-input的type=“number” 隐藏上下增减标和禁止鼠标滚轮滚动使用场景描述：经常遇到需要对输入的数字进行限制，使用type=“number” 会出现：右侧滚轮会随着鼠标滚动上下滑动增减值（默认以1为跨步），现在需要去掉这个效果需要两个步骤：第1步在样式中隐藏右测滚动（只是隐藏，滚动仍会出现数值的增减，此时需要做第2步）<style>input::-webkit-outer-spin-button,input::-webkit-inner-spin-button
2021-04-01 13:52:37
4228
原创 el-input正则表达式限制不可以输入中文
el-input正则表达式限制不可以输入中文示例：<el-input v-model="formalCode" placeholder="请输入正式Code" clearable onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" ></el-input>在elemen
2021-04-01 13:20:04
5485
1
原创 vue el-table列表中根据value显示label
el-table列表中根据value显示label适用情况：后端返回的page只有编码，要求显示名称。能够获取list ,包含所有的编码和名称关键代码：<el-table-column prop="regionCode" label="站点" header-align="center" align="center" > <template slot-scope=
2021-03-29 17:49:37
4231
原创 vue el-table指定修改某行的样式
vue el-table指定修改某行的样式修改指定行的背景颜色修改指定行的行高具体：1.html<el-table :data="tableData" :row-class-name="tableRowSetting" style="width: 100%"> <el-table-column prop="monthCompletion" label="完成率" align="center" show-overflow-tooltip>
2021-03-24 14:49:32
2510
原创 vue实现列表滚动
实现列表滚动代码解释：两张表，第一张表显示表头，第二张表滚动vue描述：当列表中数据需要滚动时html部分：<el-table :data="list" style="width: 100%; height: 50px" class="custom-table-2 hidden-tbody"><!--表头内容--></el-table><vue-seamless-scroll :data="stateData" class="auto-scorl
2021-03-24 14:36:50
1533
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人