- 博客(22)
- 收藏
- 关注
原创 element-ui表格table实现分页后保留之前checkbox选中数据
element-ui 的table表格可以轻松实现多选的功能,只要在表格列中增加type="selection"的一列即可。但是大部分情况下,表格的数据是有分页的,分页一般是要请求后台接口,这样上一页也就是上一次请求的数据的选中状态就没有了。element-ui提供了reserve-selection,可以保存数据更新前选中的值,这个属性还需要指定row-key。<template> <div> <el-table ref="userTable" :data=
2020-12-01 10:32:36
2575
3
原创 display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知:h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}然而有一次,我在项目中用到white-space: nowrap的时候,发现它失效了,我的项目是flex布局,宽度自适应的部分,white-space: nowrap撑开了内容区的长度,省略号是显示了,但是父元素的自适应宽度完全不对了。页面部分布局如下:<template> <
2020-11-30 10:44:48
3652
原创 ES6常用方法总结:数组去重、遍历数组(map、filter、forEach区别)、some和every区别
记录一下自己在vue项目中使用es6的常用方法:删除数组元素let arr = ['a', 'b', 'c']// 删除'c'arr = arr.filter(i => { return i != 'c'})$set有些情况下,仅仅通过“=”号来赋值,无法触发数据的实时更新,这个时候用$set就可以。this.$set(obj, 'name', value); //三个参数分别为对象、参数名、参数值对象赋值不改变原对象const newObj = Object.ass
2020-10-14 16:07:56
2084
原创 element-ui常见问题总结(表单校验、表格checkbox自动取消选中等)
在vue中使用element-ui过程中遇到的问题总结将element-ui的默认语言设置为英文1.main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import locale from 'element-ui/lib/locale/lang/en'Vue.use(ElementUI, { locale })2.webpack.dev.conf.js 和 webpack.prod.conf.js 在plugins增加
2020-09-24 09:19:32
2913
原创 jqGrid常见问题、常用方法总结
最近项目中用jqGrid来实现页面中的表格数据,使用过程中感触颇多,总体发现jqGrid灵活性还是很好的,我使用过程中参考了API文档,感觉这个API文档挺全面的,文档地址为:jqGrid实例中文版1.jqGrid获取数据信息1-1 获取分页信息获取返回的当前页,每页数,总页数,返回的总记录数的代码如下:var re_records = $("#gridTable").getGridParam('records'); //获取返回的记录数 var re_page = $("#gridTabl
2020-09-24 09:19:19
861
原创 谷歌浏览器开发者工具的使用详解
一、基础功能篇1. elements在elements中主要分为两大块:A:HTML结构面板B:操作dom样式、结构、事件的显示面板(1)点击箭头选中一个元素,可以在HTML面板中定位到该元素,并且可以在右侧styles面板中查看和编辑该元素的样式,编辑时,效果可以实时更新,这对于前端工程师解决样式问题是个大大的福利,在HTML面板中ctrl+F,可以对html中的内容进行搜索。(2)在右侧Computed面板中,可以查看对应元素的盒图和该元素上最终生效的样式(包含继承父级元素的样式和自己的样
2020-09-24 09:19:06
3897
原创 基于jQuery.i18n.properties 实现前端页面的国际化
1.html部分目前html中统计结果有6种类型: html, text, title, alt, placeholder, value, 以及这6种的组合,详情请查看附件i18n-demo,请按照以下格式对标签进行修改:<!--html--><div class="i18n" data-properties="htmlmsg" data-ptype="html"></div><!--text--><div class="i18n" data
2020-09-24 09:18:49
412
原创 HTML5 fileReader对象实现图片上传(支持一次上传多张图片),并用canvas进行前端压缩
首先页面布局的代码是这样的将type="file"的input绝对定位到上传图片的图标上,并且将opacity设置为0,即可实现样式效果。multiple代表可支持一次上传多张图片accept=“image/*” :代表会打开图库或者照相机但是在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框,简直不能忍呀。在IE和Firefox中则没有发现响应延迟的问题解决办法:accept=“image/gif,image/jpeg,ima
2020-09-24 09:18:34
748
原创 IE6/7兼容性问题总结
IE兼容问题1.JavaScript日期转化为时间戳出现NaN错误原始字符串 2016-10-11var date = new Date(“2016-10-11”) 在IE下date是NaN,而其他浏览器正常。字符串修改成 2016/10/11var date = new Date(“2016/10/11”) 就正常了IE6/7兼容性问题1.z-index兼容性问题问题描述:假如页面中A和B是兄弟元素,C是A的子元素,D是B的子元素,当我给C和D都设置了绝对定位(position:absol
2020-09-23 15:07:37
226
原创 Bootstrap弹出层model上嵌套的弹出层中input输入框无法输入问题解决方案
做项目过程中,在model弹出层上面又自定义了一个弹出层,自定义弹出层上面有input输入框,但是却获取不了焦点,无法输入。原因:Bootstrap框架目前只支持一层model层,即当前model层上无法再用model弹出层。解决方案:将Bootstrap弹出层最外层div的 tabindex属性去掉即可(如下面的代码示例,将tabindex这个属性去掉,不要改变其属性值,改变属性值是没用的)<div class="modal fade" id="template-modal" tabindex
2020-09-23 14:13:13
927
原创 HTML、CSS常用方法总结(谷歌浏览器记住密码自动填充无法去掉、文字截断在火狐浏览器不生效等)
1.去掉谷歌浏览器input记住账号或密码时默认出现的黄色背景直接用css的内阴影来覆盖黄色input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } 2.table表格固定列宽table{ table-layout:fixed;}3.文字截断在火狐浏览器不生效word-break: break-all;在火狐浏览器不生效,原因是加在了span(行内元素)标签上不生效,加在di
2020-09-23 14:09:35
482
原创 js实现时间戳转换成日期格式、日期格式转化为时间戳
1.将时间戳转换成日期格式:function timestampToTime(timestamp) { var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; D = date
2020-09-23 11:47:56
325
原创 jquery常用方法总结(select方法、阻止事件冒泡等)
1.jquery阻止事件冒泡$('#btn1').click(function (event) { event.stopPropagation();});2.jquery判断是否显示或隐藏if($("#test").is(':visible')){...} //是否显示if($("#test").is(":hidden")){...} //是否隐藏3.jquery select操作$(".selector").val("pxx"); //设置value为pxx的项选中$
2020-09-23 11:38:49
616
原创 移动端常见问题解决方案(position:fixed失效、overflow:auto导致滚动不流畅、input获得焦点软键盘弹出时position:fixed的footer遮挡内容区域等)
移动端弹层水平垂直居中方法.layer{ position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transfor
2020-09-23 11:30:01
2350
原创 SVN使用教程:将online分支的代码合并到sprint分支
SVN将online分支的代码合并到sprint分支操作步骤:进入到sprint分支的项目根目录,例如dev目录,鼠标右键 -> TortoiseSVN->Merge…Merge type 勾选第一项 Merge a range of revisions -> nextURL to merge from 选择online分支的dev目录 -> specific range 点击 show log按钮 -> 勾选要合并的log -> next默认勾选Compare
2020-09-23 11:24:16
592
原创 Vue常见问题总结(改变vue打包路径、img的src绑定问题、$nextTick、变量包含script结束标签报错)
一、改变vue打包的路径修改config目录下的index.jsvar path = require('path')module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'),
2020-09-23 11:17:41
772
原创 Vue兼容IE9
1.首先npm install –save babel-polyfill2.然后在main.js中的最前面引入babel-polyfillimport 'babel-polyifll'3.在index.html 加入以下代码(非必须)<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">4.在webpack.base.conf.js中,修改编译配置entriy:{ app:['babel-polyfill
2020-09-23 11:04:13
201
原创 Vue定义全局过滤器和全局公共函数
一、vue定义全局过滤器1.定义过滤器js文件,例如:src/common/filters/filter.jsfilter.js文件内容如下://所属部门exports.departmentFilter = (value) => { switch(value) { case 1: return '人力资源部'; break; case 2: return '技术部';
2020-09-23 09:48:43
738
1
原创 父子页面通过postMessage通信实现iframe高度自适应
最近项目中的需求是实现iframe高度的自适应,因为iframe表单中的内容多少不固定,所以高度也是不固定的,网上百度了好多方法,发现都没用。偶然间发现父页面和iframe子页面之间可以通过postMessage通信,这样的话,就可以在子页面获取表单的整体高度height值,然后通过通信的方式传递给父页面,父页面拿到height值,再赋值给iframe。这样我的问题就得到了完美解决,话不多说,上代码。1.iframe子页面//在页面初始化之后执行该方法,mainForm是表单父元素的idfunct
2020-09-22 16:44:23
593
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人