- 博客(22)
- 收藏
- 关注
RSS订阅原创 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
2646
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
3916
原创 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
2317
原创 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
2967
原创 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
908
原创 谷歌浏览器开发者工具的使用详解
一、基础功能篇1. elements在elements中主要分为两大块：A：HTML结构面板B：操作dom样式、结构、事件的显示面板（1）点击箭头选中一个元素，可以在HTML面板中定位到该元素，并且可以在右侧styles面板中查看和编辑该元素的样式，编辑时，效果可以实时更新，这对于前端工程师解决样式问题是个大大的福利，在HTML面板中ctrl+F，可以对html中的内容进行搜索。（2）在右侧Computed面板中，可以查看对应元素的盒图和该元素上最终生效的样式（包含继承父级元素的样式和自己的样
2020-09-24 09:19:06
3987
原创 基于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
435
原创 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
797
原创 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
244
原创 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
991
原创 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
504
原创 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
352
原创 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
639
原创 移动端常见问题解决方案（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
2405
原创 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
604
原创 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
816
原创 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
222
原创 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
785
1
原创 父子页面通过postMessage通信实现iframe高度自适应
最近项目中的需求是实现iframe高度的自适应，因为iframe表单中的内容多少不固定，所以高度也是不固定的，网上百度了好多方法，发现都没用。偶然间发现父页面和iframe子页面之间可以通过postMessage通信，这样的话，就可以在子页面获取表单的整体高度height值，然后通过通信的方式传递给父页面，父页面拿到height值，再赋值给iframe。这样我的问题就得到了完美解决，话不多说，上代码。1.iframe子页面//在页面初始化之后执行该方法，mainForm是表单父元素的idfunct
2020-09-22 16:44:23
635
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人