中国建设人才服务信息网是什么网站,深圳居家办公最新通知,个人优秀网站,wordpress中文官网前#xff1a;项目用到的技术栈为webpackvue2.xpugstyluselementUI1、IE9中#xff0c; 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题解决方法#xff1a;/*** 强制重绘页面的select 输入框#xff0c;解决IE9只显示单个字符串问题* param useNextTick …前项目用到的技术栈为webpackvue2.xpugstyluselementUI1、IE9中 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题解决方法/*** 强制重绘页面的select 输入框解决IE9只显示单个字符串问题* param useNextTick {Boolean} 使用在vm next tick 处理 默认true*/forceRedrawSelect: function (useNextTick) {useNextTick useNextTick ! false;if (!browser.isIE)return;var _this this;var redraw function () {var $select _this.$(select);$select.css(width, 0);$select.css(width, ); // remove from style tag};if(useNextTick)this.$nextTick(redraw);elseredraw()},2、IE9中elementUI的el-input删除操作无法触发数据变动监听解决办法加入ie9input事件垫片cnpm install --save ie9-oninput-polyfill3、vue自定义指令判断时机问题// 错误写法null (el) {if (el.innerHTML || el.innerHTML --) {addClass(el, null-handler)} else {removeClass(el, null-handler)}},因为无法控制标签内容的渲染时机导致判断出错所以应该去判断value// 正确写法null (el, { value, oldValue }) {if (oldValue value) returnif (value || value --) {addClass(el, null-handler)} else {removeClass(el, null-handler)}},4、el-input手动获取焦点问题情景输入框一开始是隐藏的点击按钮显示输入框并获取焦点把手动获取焦点那段代码写在$nextTick()就好了手动获取焦点这个操作我也记录一下首先给标签加个属性refsearchBox(名字随便起),然后点击按钮把控制显示的字段赋值true接着写下这几行代码就好了this.$nextTick(() {this.$refs.searchBox.focus()})image.pngimage.png5、mounted钩子函数中请求数据导致页面闪屏问题其实就是加载时机问题放在created里会比mounted触发早一点如果在页面挂载完之前请求完成的话就不会看到闪屏了6、IE9中template标签使用问题之前在tr标签里面用template标签包裹td标签出现了比较严重的UI错乱所以。。IE9不能在tr标签中使用template标签7、纯色svg转换成字体(用了panda这个软件)跟预期不符这个应该是跟svg的描绘路径什么的有关让设计师同学重新出一个图吧。。8、一个奇葩bug开发环境elementUI的表格排序图标不显示但是在线上环境和其他同事的开发环境没问题// 是由于mac没安装xcode导致依赖包install出错(出错了居然还能启动。。)// 输入以下命令如果没安装xcode系统就会提示你安装了// npm rebuild node-sass --force后来又出现了问题 然后我升级了npm版本解决9、el-table用v-if隐藏显示列和预期不符问题给el-table-column加一个key属性:keyMath.random()或者其他的确保每列的key值不同就可以了10、在使用el-table的时候有的时候需要对表格中的数据做处理需要用到filter虽然官方也有提供过滤的方法(filter-method)但是还是用自定义列然后用filter复用性好一些{{scope.row.date | dateConvert}}11、在使用el-table的时候有时候需要自定义表头比如在表头中加个问号然后hover有个提示信息这里就需要用到官方提供的render-header属性了首先给需要自定义表头的列加一个属性绑定一个方法HTML中{{scope.row.date | dateConvert}}methods中renderDate (createElement, { column }) {return createElement(div, {style: {margin-top: 5px}}, [column.label,createElement(el-tooltip,{class: header-tip,props: {effect: light,placement: bottom-end,enterable: false,content: 日期}}, [createElement(i, {class: el-icon-question})])])}12、用forEach遍历NodeListie报错“nodelist为对象不支持forEach属性”因为ie认为NodeList是一个对象不支持forEach方法遍历解决方法很简单// es6写法let nodeList [...this.$el.querySelectorAll([id^productItem])]// es5写法let nodeList Array.prototype.slice.call(this.$el.querySelectorAll([id^productItem]))
