前端组件，JS等问题及解决方案

element

el-table

修改表格行hover与点击行背景颜色

// 修改带有属性 highlight-current-row 背景色
.el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: @el-table-tr-hover !important;
}
// 各种行属性下hover背景色 如固定列
.el-table__body tr.hover-row>td.el-table__cell{
  background-color: @el-table-tr-hover !important;
}
// 点击行背景色
.el-table__body tr.current-row>td.el-table__cell {
  background-color: @el-table-tr-hover !important;
}

解决el-table 中嵌入select或datepick等有下拉框的组件时，拖动滚动条，下拉框不跟随移动

在el-table中加入滚动监听器，这种方式是拖动滚动条收起下拉框。

data() {
	return {
		element: null;
	}
},
methods: {
	// 模拟页面点击
	click() {
		let a = document.createElement("a");
		document.appendChild(a);
		a.click();
		document.removeChild(a);
	}
},
onMount() {
	// 获取到table体
	this.element = this.$refs.table.bodyWrapper;
	// 在生成页面的时候添加监听事件
	this.element.addEventListener("scroll", this.click,  true) 
},
beforeDestroy() {
	// 在页面销毁的时候移除监听事件
	this.element.removeEventListener("scroll", this.click, true);
}

el-table 有分页组件的情况下，却没有显示分页

添加以下样式

.el-table{
	overflow:visible !important;
}
.el-card__body {
	padding: 20px 20px 50px 20px;
}

el-table 最后一行显示不全问题

.el-table {
	overflow: hidden;
}

el-table 自定义无数据表格样式

.el-table__empty-text {
	display: block;
	width: 100px; // 自定义宽度
	height: 100px; // 自定义高度
	padding-top: 50px;
	// 自定义显示图片
	background: url('../src/assets/images/empty.jpg') no-repeat;
	color: #909399;
	box-sizing: border-box;
	background-size: 100%;
}

解决合计行不显示问题

this.$nextTick(() => {
	// 重新布局表格
	this.$refs.multipleTable.doLayout();
});

合计行中显示特殊字符 如 换行符 \n

.el-table .el-table__footer .cell {
	// 规定段落中的文本不进行换行
	/**
		normal	默认。空白会被浏览器忽略。
		pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
		nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
		pre-wrap	保留空白符序列，但是正常地进行换行。
		pre-line	合并空白符序列，但是保留换行符。
		inherit	规定应该从父元素继承 white-space 属性的值。
	*/
	white-space: pre-line;
}

解决固定列处，无法拖动滚动条

 .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 1;
 }

el-date-picker

解决应为时区问题，获取的时间相差8小时问题

如果以下属性不能解决问题的话，人工手动添加8小时。

// 格式化获取的时间方式 iview的日期组件也有同样问题
value-format=“yyyy-MM-dd HH:mm:ss”

// 手动加
 this.listQuery.filterList.forEach(item => {
   if (item.filterKey == 'startTime' || item.filterKey == 'endTime') {
        item.filterValue += 86399999;
   }
});

// 或后端修改为如下形式：  加JsonFormat注解
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
// 后端处理时间格式
@DateTimeFormat(pattern = “yyyy-MM-dd”)
@JsonFormat(pattern = “yyyy-MM-dd”)
private Date signingdate;

iview

Form

在表单自定验证方式时，如果没有对验证失败返回回调函数的话，验证失败后，会在输入框出现加载图标。

自定义表单验证

const validatorPhone = (rule, value, callback) => {
	if (Number(value)) {
		callback();
	} else {
		callback('填写错误');
	}
}
data() {
	return {
		rules: {
			phone: [{validator: validatorPhone}]
		}
	}
}

下拉框选择或日期等组件，有值但提示验证不通过

1、排查form标签prop是否维护且正确。
2、排查v-model是否正确。
3、排查验证规则

// 如果验证规则如下, 需要添加 trigger和type属性,一般情况下，如下规则不会出现问题。
rules: {
	phone: [
		{requried: true, message: '请输入'}
	]
}
// 更改
rules: {
	phone: [
		{requried: true, message: '请输入', trigger: 'change', type: 'number'}
	]
}

解决menu open-names属性不生效问题

 openedNames() {
   this.$nextTick(() => {
      this.$refs.side_menu.updateOpened();
      this.$refs.side_menu.updateActiveName();
    })
 }

Js问题

打印

IFrame 打印图片不显示问题

图片没有加载出来就打印，主要是IFrame判断是否加载完 IFrame.onload(() => {}) 在该方法中进行调用打印事件和移除IFrame标签。
提供一个打印方法。

var layoutStyle = `<style media="print">
   article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul{
        padding: 0;
        margin: 0;
   }
   .ivu-row{position:relative;margin-left:0;margin-right:0;height:auto;zoom:1;display:block}.ivu-row:after,.ivu-row:before{content:"";display:table}.ivu-row:after{clear:both;visibility:hidden;font-size:0;height:0}.ivu-row-flex{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.ivu-row-flex:after,.ivu-row-flex:before{display:-ms-flexbox;display:flex}.ivu-row-flex-start{-ms-flex-pack:start;justify-content:flex-start}.ivu-row-flex-center{-ms-flex-pack:center;justify-content:center}.ivu-row-flex-end{-ms-flex-pack:end;justify-content:flex-end}.ivu-row-flex-space-between{-ms-flex-pack:justify;justify-content:space-between}.ivu-row-flex-space-around{-ms-flex-pack:distribute;justify-content:space-around}.ivu-row-flex-top{-ms-flex-align:start;align-items:flex-start}.ivu-row-flex-middle{-ms-flex-align:center;align-items:center}.ivu-row-flex-bottom{-ms-flex-align:end;align-items:flex-end}.ivu-col{position:relative;display:block}.ivu-col-span-1,.ivu-col-span-10,.ivu-col-span-11,.ivu-col-span-12,.ivu-col-span-13,.ivu-col-span-14,.ivu-col-span-15,.ivu-col-span-16,.ivu-col-span-17,.ivu-col-span-18,.ivu-col-span-19,.ivu-col-span-2,.ivu-col-span-20,.ivu-col-span-21,.ivu-col-span-22,.ivu-col-span-23,.ivu-col-span-24,.ivu-col-span-3,.ivu-col-span-4,.ivu-col-span-5,.ivu-col-span-6,.ivu-col-span-7,.ivu-col-span-8,.ivu-col-span-9{float:left;-ms-flex:0 0 auto;flex:0 0 auto}.ivu-col-span-24{display:block;width:100%}.ivu-col-push-24{left:100%}.ivu-col-pull-24{right:100%}.ivu-col-offset-24{margin-left:100%}.ivu-col-order-24{-ms-flex-order:24;order:24}.ivu-col-span-23{display:block;width:95.83333333%}.ivu-col-push-23{left:95.83333333%}.ivu-col-pull-23{right:95.83333333%}.ivu-col-offset-23{margin-left:95.83333333%}.ivu-col-order-23{-ms-flex-order:23;order:23}.ivu-col-span-22{display:block;width:91.66666667%}.ivu-col-push-22{left:91.66666667%}.ivu-col-pull-22{right:91.66666667%}.ivu-col-offset-22{margin-left:91.66666667%}.ivu-col-order-22{-ms-flex-order:22;order:22}.ivu-col-span-21{display:block;width:87.5%}.ivu-col-push-21{left:87.5%}.ivu-col-pull-21{right:87.5%}.ivu-col-offset-21{margin-left:87.5%}.ivu-col-order-21{-ms-flex-order:21;order:21}.ivu-col-span-20{display:block;width:83.33333333%}.ivu-col-push-20{left:83.33333333%}.ivu-col-pull-20{right:83.33333333%}.ivu-col-offset-20{margin-left:83.33333333%}.ivu-col-order-20{-ms-flex-order:20;order:20}.ivu-col-span-19{display:block;width:79.16666667%}.ivu-col-push-19{left:79.16666667%}.ivu-col-pull-19{right:79.16666667%}.ivu-col-offset-19{margin-left:79.16666667%}.ivu-col-order-19{-ms-flex-order:19;order:19}.ivu-col-span-18{display:block;width:75%}.ivu-col-push-18{left:75%}.ivu-col-pull-18{right:75%}.ivu-col-offset-18{margin-left:75%}.ivu-col-order-18{-ms-flex-order:18;order:18}.ivu-col-span-17{display:block;width:70.83333333%}.ivu-col-push-17{left:70.83333333%}.ivu-col-pull-17{right:70.83333333%}.ivu-col-offset-17{margin-left:70.83333333%}.ivu-col-order-17{-ms-flex-order:17;order:17}.ivu-col-span-16{display:block;width:66.66666667%}.ivu-col-push-16{left:66.66666667%}.ivu-col-pull-16{right:66.66666667%}.ivu-col-offset-16{margin-left:66.66666667%}.ivu-col-order-16{-ms-flex-order:16;order:16}.ivu-col-span-15{display:block;width:62.5%}.ivu-col-push-15{left:62.5%}.ivu-col-pull-15{right:62.5%}.ivu-col-offset-15{margin-left:62.5%}.ivu-col-order-15{-ms-flex-order:15;order:15}.ivu-col-span-14{display:block;width:58.33333333%}.ivu-col-push-14{left:58.33333333%}.ivu-col-pull-14{right:58.33333333%}.ivu-col-offset-14{margin-left:58.33333333%}.ivu-col-order-14{-ms-flex-order:14;order:14}.ivu-col-span-13{display:block;width:54.16666667%}.ivu-col-push-13{left:54.16666667%}.ivu-col-pull-13{right:54.16666667%}.ivu-col-offset-13{margin-left:54.16666667%}.ivu-col-order-13{-ms-flex-order:13;order:13}.ivu-col-span-12{display:block;width:50%}.ivu-col-push-12{left:50%}.ivu-col-pull-12{right:50%}.ivu-col-offset-12{margin-left:50%}.ivu-col-order-12{-ms-flex-order:12;order:12}.ivu-col-span-11{display:block;width:45.83333333%}.ivu-col-push-11{left:45.83333333%}.ivu-col-pull-11{right:45.83333333%}.ivu-col-offset-11{margin-left:45.83333333%}.ivu-col-order-11{-ms-flex-order:11;order:11}.ivu-col-span-10{display:block;width:41.66666667%}.ivu-col-push-10{left:41.66666667%}.ivu-col-pull-10{right:41.66666667%}.ivu-col-offset-10{margin-left:41.66666667%}.ivu-col-order-10{-ms-flex-order:10;order:10}.ivu-col-span-9{display:block;width:37.5%}.ivu-col-push-9{left:37.5%}.ivu-col-pull-9{right:37.5%}.ivu-col-offset-9{margin-left:37.5%}.ivu-col-order-9{-ms-flex-order:9;order:9}.ivu-col-span-8{display:block;width:33.33333333%}.ivu-col-push-8{left:33.33333333%}.ivu-col-pull-8{right:33.33333333%}.ivu-col-offset-8{margin-left:33.33333333%}.ivu-col-order-8{-ms-flex-order:8;order:8}.ivu-col-span-7{display:block;width:29.16666667%}.ivu-col-push-7{left:29.16666667%}.ivu-col-pull-7{right:29.16666667%}.ivu-col-offset-7{margin-left:29.16666667%}.ivu-col-order-7{-ms-flex-order:7;order:7}.ivu-col-span-6{display:block;width:25%}.ivu-col-push-6{left:25%}.ivu-col-pull-6{right:25%}.ivu-col-offset-6{margin-left:25%}.ivu-col-order-6{-ms-flex-order:6;order:6}.ivu-col-span-5{display:block;width:20.83333333%}.ivu-col-push-5{left:20.83333333%}.ivu-col-pull-5{right:20.83333333%}.ivu-col-offset-5{margin-left:20.83333333%}.ivu-col-order-5{-ms-flex-order:5;order:5}.ivu-col-span-4{display:block;width:16.66666667%}.ivu-col-push-4{left:16.66666667%}.ivu-col-pull-4{right:16.66666667%}.ivu-col-offset-4{margin-left:16.66666667%}.ivu-col-order-4{-ms-flex-order:4;order:4}.ivu-col-span-3{display:block;width:12.5%}.ivu-col-push-3{left:12.5%}.ivu-col-pull-3{right:12.5%}.ivu-col-offset-3{margin-left:12.5%}.ivu-col-order-3{-ms-flex-order:3;order:3}.ivu-col-span-2{display:block;width:8.33333333%}.ivu-col-push-2{left:8.33333333%}.ivu-col-pull-2{right:8.33333333%}.ivu-col-offset-2{margin-left:8.33333333%}.ivu-col-order-2{-ms-flex-order:2;order:2}.ivu-col-span-1{display:block;width:4.16666667%}.ivu-col-push-1{left:4.16666667%}.ivu-col-pull-1{right:4.16666667%}.ivu-col-offset-1{margin-left:4.16666667%}.ivu-col-order-1{-ms-flex-order:1;order:1}.ivu-col-span-0{display:none}.ivu-col-push-0{left:auto}.ivu-col-pull-0{right:auto}.ivu-col-span-xs-1,.ivu-col-span-xs-10,.ivu-col-span-xs-11,.ivu-col-span-xs-12,.ivu-col-span-xs-13,.ivu-col-span-xs-14,.ivu-col-span-xs-15,.ivu-col-span-xs-16,.ivu-col-span-xs-17,.ivu-col-span-xs-18,.ivu-col-span-xs-19,.ivu-col-span-xs-2,.ivu-col-span-xs-20,.ivu-col-span-xs-21,.ivu-col-span-xs-22,.ivu-col-span-xs-23,.ivu-col-span-xs-24,.ivu-col-span-xs-3,.ivu-col-span-xs-4,.ivu-col-span-xs-5,.ivu-col-span-xs-6,.ivu-col-span-xs-7,.ivu-col-span-xs-8,.ivu-col-span-xs-9{float:left;-ms-flex:0 0 auto;flex:0 0 auto}.ivu-col-span-xs-24{display:block;width:100%}.ivu-col-xs-push-24{left:100%}.ivu-col-xs-pull-24{right:100%}.ivu-col-xs-offset-24{margin-left:100%}.ivu-col-xs-order-24{-ms-flex-order:24;order:24}.ivu-col-span-xs-23{display:block;width:95.83333333%}.ivu-col-xs-push-23{left:95.83333333%}.ivu-col-xs-pull-23{right:95.83333333%}.ivu-col-xs-offset-23{margin-left:95.83333333%}.ivu-col-xs-order-23{-ms-flex-order:23;order:23}.ivu-col-span-xs-22{display:block;width:91.66666667%}.ivu-col-xs-push-22{left:91.66666667%}.ivu-col-xs-pull-22{right:91.66666667%}.ivu-col-xs-offset-22{margin-left:91.66666667%}.ivu-col-xs-order-22{-ms-flex-order:22;order:22}.ivu-col-span-xs-21{display:block;width:87.5%}.ivu-col-xs-push-21{left:87.5%}.ivu-col-xs-pull-21{right:87.5%}.ivu-col-xs-offset-21{margin-left:87.5%}.ivu-col-xs-order-21{-ms-flex-order:21;order:21}.ivu-col-span-xs-20{display:block;width:83.33333333%}.ivu-col-xs-push-20{left:83.33333333%}.ivu-col-xs-pull-20{right:83.33333333%}.ivu-col-xs-offset-20{margin-left:83.33333333%}.ivu-col-xs-order-20{-ms-flex-order:20;order:20}.ivu-col-span-xs-19{display:block;width:79.16666667%}.ivu-col-xs-push-19{left:79.16666667%}.ivu-col-xs-pull-19{right:79.16666667%}.ivu-col-xs-offset-19{margin-left:79.16666667%}.ivu-col-xs-order-19{-ms-flex-order:19;order:19}.ivu-col-span-xs-18{display:block;width:75%}.ivu-col-xs-push-18{left:75%}.ivu-col-xs-pull-18{right:75%}.ivu-col-xs-offset-18{margin-left:75%}.ivu-col-xs-order-18{-ms-flex-order:18;order:18}.ivu-col-span-xs-17{display:block;width:70.83333333%}.ivu-col-xs-push-17{left:70.83333333%}.ivu-col-xs-pull-17{right:70.83333333%}.ivu-col-xs-offset-17{margin-left:70.83333333%}.ivu-col-xs-order-17{-ms-flex-order:17;order:17}.ivu-col-span-xs-16{display:block;width:66.66666667%}.ivu-col-xs-push-16{left:66.66666667%}.ivu-col-xs-pull-16{right:66.66666667%}.ivu-col-xs-offset-16{margin-left:66.66666667%}.ivu-col-xs-order-16{-ms-flex-order:16;order:16}.ivu-col-span-xs-15{display:block;width:62.5%}.ivu-col-xs-push-15{left:62.5%}.ivu-col-xs-pull-15{right:62.5%}.ivu-col-xs-offset-15{margin-left:62.5%}.ivu-col-xs-order-15{-ms-flex-order:15;order:15}.ivu-col-span-xs-14{display:block;width:58.33333333%}.ivu-col-xs-push-14{left:58.33333333%}.ivu-col-xs-pull-14{right:58.33333333%}.ivu-col-xs-offset-14{margin-left:58.33333333%}.ivu-col-xs-order-14{-ms-flex-order:14;order:14}.ivu-col-span-xs-13{display:block;width:54.16666667%}.ivu-col-xs-push-13{left:54.16666667%}.ivu-col-xs-pull-13{right:54.16666667%}.ivu-col-xs-offset-13{margin-left:54.16666667%}.ivu-col-xs-order-13{-ms-flex-order:13;order:13}.ivu-col-span-xs-12{display:block;width:50%}.ivu-col-xs-push-12{left:50%}.ivu-col-xs-pull-12{right:50%}.ivu-col-xs-offset-12{margin-left:50%}.ivu-col-xs-order-12{-ms-flex-order:12;order:12}.ivu-col-span-xs-11{display:block;width:45.83333333%}.ivu-col-xs-push-11{left:45.83333333%}.ivu-col-xs-pull-11{right:45.83333333%}.ivu-col-xs-offset-11{margin-left:45.83333333%}.ivu-col-xs-order-11{-ms-flex-order:11;order:11}.ivu-col-span-xs-10{display:block;width:41.66666667%}.ivu-col-xs-push-10{left:41.66666667%}.ivu-col-xs-pull-10{right:41.66666667%}.ivu-col-xs-offset-10{margin-left:41.66666667%}.ivu-col-xs-order-10{-ms-flex-order:10;order:10}.ivu-col-span-xs-9{display:block;width:37.5%}.ivu-col-xs-push-9{left:37.5%}.ivu-col-xs-pull-9{right:37.5%}.ivu-col-xs-offset-9{margin-left:37.5%}.ivu-col-xs-order-9{-ms-flex-order:9;order:9}.ivu-col-span-xs-8{display:block;width:33.33333333%}.ivu-col-xs-push-8{left:33.33333333%}.ivu-col-xs-pull-8{right:33.33333333%}.ivu-col-xs-offset-8{margin-left:33.33333333%}.ivu-col-xs-order-8{-ms-flex-order:8;order:8}.ivu-col-span-xs-7{display:block;width:29.16666667%}.ivu-col-xs-push-7{left:29.16666667%}.ivu-col-xs-pull-7{right:29.16666667%}.ivu-col-xs-offset-7{margin-left:29.16666667%}.ivu-col-xs-order-7{-ms-flex-order:7;order:7}.ivu-col-span-xs-6{display:block;width:25%}.ivu-col-xs-push-6{left:25%}.ivu-col-xs-pull-6{right:25%}.ivu-col-xs-offset-6{margin-left:25%}.ivu-col-xs-order-6{-ms-flex-order:6;order:6}.ivu-col-span-xs-5{display:block;width:20.83333333%}.ivu-col-xs-push-5{left:20.83333333%}.ivu-col-xs-pull-5{right:20.83333333%}.ivu-col-xs-offset-5{margin-left:20.83333333%}.ivu-col-xs-order-5{-ms-flex-order:5;order:5}.ivu-col-span-xs-4{display:block;width:16.66666667%}.ivu-col-xs-push-4{left:16.66666667%}.ivu-col-xs-pull-4{right:16.66666667%}.ivu-col-xs-offset-4{margin-left:16.66666667%}.ivu-col-xs-order-4{-ms-flex-order:4;order:4}.ivu-col-span-xs-3{display:block;width:12.5%}.ivu-col-xs-push-3{left:12.5%}.ivu-col-xs-pull-3{right:12.5%}.ivu-col-xs-offset-3{margin-left:12.5%}.ivu-col-xs-order-3{-ms-flex-order:3;order:3}.ivu-col-span-xs-2{display:block;width:8.33333333%}.ivu-col-xs-push-2{left:8.33333333%}.ivu-col-xs-pull-2{right:8.33333333%}.ivu-col-xs-offset-2{margin-left:8.33333333%}.ivu-col-xs-order-2{-ms-flex-order:2;order:2}.ivu-col-span-xs-1{display:block;width:4.16666667%}.ivu-col-xs-push-1{left:4.16666667%}.ivu-col-xs-pull-1{right:4.16666667%}.ivu-col-xs-offset-1{margin-left:4.16666667%}.ivu-col-xs-order-1{-ms-flex-order:1;order:1}.ivu-col-span-xs-0{display:none}.ivu-col-xs-push-0{left:auto}.ivu-col-xs-pull-0{right:auto}@media (min-width:768px){.ivu-col-span-sm-1,.ivu-col-span-sm-10,.ivu-col-span-sm-11,.ivu-col-span-sm-12,.ivu-col-span-sm-13,.ivu-col-span-sm-14,.ivu-col-span-sm-15,.ivu-col-span-sm-16,.ivu-col-span-sm-17,.ivu-col-span-sm-18,.ivu-col-span-sm-19,.ivu-col-span-sm-2,.ivu-col-span-sm-20,.ivu-col-span-sm-21,.ivu-col-span-sm-22,.ivu-col-span-sm-23,.ivu-col-span-sm-24,.ivu-col-span-sm-3,.ivu-col-span-sm-4,.ivu-col-span-sm-5,.ivu-col-span-sm-6,.ivu-col-span-sm-7,.ivu-col-span-sm-8,.ivu-col-span-sm-9{float:left;-ms-flex:0 0 auto;flex:0 0 auto}.ivu-col-span-sm-24{display:block;width:100%}.ivu-col-sm-push-24{left:100%}.ivu-col-sm-pull-24{right:100%}.ivu-col-sm-offset-24{margin-left:100%}.ivu-col-sm-order-24{-ms-flex-order:24;order:24}.ivu-col-span-sm-23{display:block;width:95.83333333%}.ivu-col-sm-push-23{left:95.83333333%}.ivu-col-sm-pull-23{right:95.83333333%}.ivu-col-sm-offset-23{margin-left:95.83333333%}.ivu-col-sm-order-23{-ms-flex-order:23;order:23}.ivu-col-span-sm-22{display:block;width:91.66666667%}.ivu-col-sm-push-22{left:91.66666667%}.ivu-col-sm-pull-22{right:91.66666667%}.ivu-col-sm-offset-22{margin-left:91.66666667%}.ivu-col-sm-order-22{-ms-flex-order:22;order:22}.ivu-col-span-sm-21{display:block;width:87.5%}.ivu-col-sm-push-21{left:87.5%}.ivu-col-sm-pull-21{right:87.5%}.ivu-col-sm-offset-21{margin-left:87.5%}.ivu-col-sm-order-21{-ms-flex-order:21;order:21}.ivu-col-span-sm-20{display:block;width:83.33333333%}.ivu-col-sm-push-20{left:83.33333333%}.ivu-col-sm-pull-20{right:83.33333333%}.ivu-col-sm-offset-20{margin-left:83.33333333%}.ivu-col-sm-order-20{-ms-flex-order:20;order:20}.ivu-col-span-sm-19{display:block;width:79.16666667%}.ivu-col-sm-push-19{left:79.16666667%}.ivu-col-sm-pull-19{right:79.16666667%}.ivu-col-sm-offset-19{margin-left:79.16666667%}.ivu-col-sm-order-19{-ms-flex-order:19;order:19}.ivu-col-span-sm-18{display:block;width:75%}.ivu-col-sm-push-18{left:75%}.ivu-col-sm-pull-18{right:75%}.ivu-col-sm-offset-18{margin-left:75%}.ivu-col-sm-order-18{-ms-flex-order:18;order:18}.ivu-col-span-sm-17{display:block;width:70.83333333%}.ivu-col-sm-push-17{left:70.83333333%}.ivu-col-sm-pull-17{right:70.83333333%}.ivu-col-sm-offset-17{margin-left:70.83333333%}.ivu-col-sm-order-17{-ms-flex-order:17;order:17}.ivu-col-span-sm-16{display:block;width:66.66666667%}.ivu-col-sm-push-16{left:66.66666667%}.ivu-col-sm-pull-16{right:66.66666667%}.ivu-col-sm-offset-16{margin-left:66.66666667%}.ivu-col-sm-order-16{-ms-flex-order:16;order:16}.ivu-col-span-sm-15{display:block;width:62.5%}.ivu-col-sm-push-15{left:62.5%}.ivu-col-sm-pull-15{right:62.5%}.ivu-col-sm-offset-15{margin-left:62.5%}.ivu-col-sm-order-15{-ms-flex-order:15;order:15}.ivu-col-span-sm-14{display:block;width:58.33333333%}.ivu-col-sm-push-14{left:58.33333333%}.ivu-col-sm-pull-14{right:58.33333333%}.ivu-col-sm-offset-14{margin-left:58.33333333%}.ivu-col-sm-order-14{-ms-flex-order:14;order:14}.ivu-col-span-sm-13{display:block;width:54.16666667%}.ivu-col-sm-push-13{left:54.16666667%}.ivu-col-sm-pull-13{right:54.16666667%}.ivu-col-sm-offset-13{margin-left:54.16666667%}.ivu-col-sm-order-13{-ms-flex-order:13;order:13}.ivu-col-span-sm-12{display:block;width:50%}.ivu-col-sm-push-12{left:50%}.ivu-col-sm-pull-12{right:50%}.ivu-col-sm-offset-12{margin-left:50%}.ivu-col-sm-order-12{-ms-flex-order:12;order:12}.ivu-col-span-sm-11{display:block;width:45.83333333%}.ivu-col-sm-push-11{left:45.83333333%}.ivu-col-sm-pull-11{right:45.83333333%}.ivu-col-sm-offset-11{margin-left:45.83333333%}.ivu-col-sm-order-11{-ms-flex-order:11;order:11}.ivu-col-span-sm-10{display:block;width:41.66666667%}.ivu-col-sm-push-10{left:41.66666667%}.ivu-col-sm-pull-10{right:41.66666667%}.ivu-col-sm-offset-10{margin-left:41.66666667%}.ivu-col-sm-order-10{-ms-flex-order:10;order:10}.ivu-col-span-sm-9{display:block;width:37.5%}.ivu-col-sm-push-9{left:37.5%}.ivu-col-sm-pull-9{right:37.5%}.ivu-col-sm-offset-9{margin-left:37.5%}.ivu-col-sm-order-9{-ms-flex-order:9;order:9}.ivu-col-span-sm-8{display:block;width:33.33333333%}.ivu-col-sm-push-8{left:33.33333333%}.ivu-col-sm-pull-8{right:33.33333333%}.ivu-col-sm-offset-8{margin-left:33.33333333%}.ivu-col-sm-order-8{-ms-flex-order:8;order:8}.ivu-col-span-sm-7{display:block;width:29.16666667%}.ivu-col-sm-push-7{left:29.16666667%}.ivu-col-sm-pull-7{right:29.16666667%}.ivu-col-sm-offset-7{margin-left:29.16666667%}.ivu-col-sm-order-7{-ms-flex-order:7;order:7}.ivu-col-span-sm-6{display:block;width:25%}.ivu-col-sm-push-6{left:25%}.ivu-col-sm-pull-6{right:25%}.ivu-col-sm-offset-6{margin-left:25%}.ivu-col-sm-order-6{-ms-flex-order:6;order:6}.ivu-col-span-sm-5{display:block;width:20.83333333%}.ivu-col-sm-push-5{left:20.83333333%}.ivu-col-sm-pull-5{right:20.83333333%}.ivu-col-sm-offset-5{margin-left:20.83333333%}.ivu-col-sm-order-5{-ms-flex-order:5;order:5}.ivu-col-span-sm-4{display:block;width:16.66666667%}.ivu-col-sm-push-4{left:16.66666667%}.ivu-col-sm-pull-4{right:16.66666667%}.ivu-col-sm-offset-4{margin-left:16.66666667%}.ivu-col-sm-order-4{-ms-flex-order:4;order:4}.ivu-col-span-sm-3{display:block;width:12.5%}.ivu-col-sm-push-3{left:12.5%}.ivu-col-sm-pull-3{right:12.5%}.ivu-col-sm-offset-3{margin-left:12.5%}.ivu-col-sm-order-3{-ms-flex-order:3;order:3}.ivu-col-span-sm-2{display:block;width:8.33333333%}.ivu-col-sm-push-2{left:8.33333333%}.ivu-col-sm-pull-2{right:8.33333333%}.ivu-col-sm-offset-2{margin-left:8.33333333%}.ivu-col-sm-order-2{-ms-flex-order:2;order:2}.ivu-col-span-sm-1{display:block;width:4.16666667%}.ivu-col-sm-push-1{left:4.16666667%}.ivu-col-sm-pull-1{right:4.16666667%}.ivu-col-sm-offset-1{margin-left:4.16666667%}.ivu-col-sm-order-1{-ms-flex-order:1;order:1}.ivu-col-span-sm-0{display:none}.ivu-col-sm-push-0{left:auto}.ivu-col-sm-pull-0{right:auto}}@media (min-width:992px){.ivu-col-span-md-1,.ivu-col-span-md-10,.ivu-col-span-md-11,.ivu-col-span-md-12,.ivu-col-span-md-13,.ivu-col-span-md-14,.ivu-col-span-md-15,.ivu-col-span-md-16,.ivu-col-span-md-17,.ivu-col-span-md-18,.ivu-col-span-md-19,.ivu-col-span-md-2,.ivu-col-span-md-20,.ivu-col-span-md-21,.ivu-col-span-md-22,.ivu-col-span-md-23,.ivu-col-span-md-24,.ivu-col-span-md-3,.ivu-col-span-md-4,.ivu-col-span-md-5,.ivu-col-span-md-6,.ivu-col-span-md-7,.ivu-col-span-md-8,.ivu-col-span-md-9{float:left;-ms-flex:0 0 auto;flex:0 0 auto}.ivu-col-span-md-24{display:block;width:100%}.ivu-col-md-push-24{left:100%}.ivu-col-md-pull-24{right:100%}.ivu-col-md-offset-24{margin-left:100%}.ivu-col-md-order-24{-ms-flex-order:24;order:24}.ivu-col-span-md-23{display:block;width:95.83333333%}.ivu-col-md-push-23{left:95.83333333%}.ivu-col-md-pull-23{right:95.83333333%}.ivu-col-md-offset-23{margin-left:95.83333333%}.ivu-col-md-order-23{-ms-flex-order:23;order:23}.ivu-col-span-md-22{display:block;width:91.66666667%}.ivu-col-md-push-22{left:91.66666667%}.ivu-col-md-pull-22{right:91.66666667%}.ivu-col-md-offset-22{margin-left:91.66666667%}.ivu-col-md-order-22{-ms-flex-order:22;order:22}.ivu-col-span-md-21{display:block;width:87.5%}.ivu-col-md-push-21{left:87.5%}.ivu-col-md-pull-21{right:87.5%}.ivu-col-md-offset-21{margin-left:87.5%}.ivu-col-md-order-21{-ms-flex-order:21;order:21}.ivu-col-span-md-20{display:block;width:83.33333333%}.ivu-col-md-push-20{left:83.33333333%}.ivu-col-md-pull-20{right:83.33333333%}.ivu-col-md-offset-20{margin-left:83.33333333%}.ivu-col-md-order-20{-ms-flex-order:20;order:20}.ivu-col-span-md-19{display:block;width:79.16666667%}.ivu-col-md-push-19{left:79.16666667%}.ivu-col-md-pull-19{right:79.16666667%}.ivu-col-md-offset-19{margin-left:79.16666667%}.ivu-col-md-order-19{-ms-flex-order:19;order:19}.ivu-col-span-md-18{display:block;width:75%}.ivu-col-md-push-18{left:75%}.ivu-col-md-pull-18{right:75%}.ivu-col-md-offset-18{margin-left:75%}.ivu-col-md-order-18{-ms-flex-order:18;order:18}.ivu-col-span-md-17{display:block;width:70.83333333%}.ivu-col-md-push-17{left:70.83333333%}.ivu-col-md-pull-17{right:70.83333333%}.ivu-col-md-offset-17{margin-left:70.83333333%}.ivu-col-md-order-17{-ms-flex-order:17;order:17}.ivu-col-span-md-16{display:block;width:66.66666667%}.ivu-col-md-push-16{left:66.66666667%}.ivu-col-md-pull-16{right:66.66666667%}.ivu-col-md-offset-16{margin-left:66.66666667%}.ivu-col-md-order-16{-ms-flex-order:16;order:16}.ivu-col-span-md-15{display:block;width:62.5%}.ivu-col-md-push-15{left:62.5%}.ivu-col-md-pull-15{right:62.5%}.ivu-col-md-offset-15{margin-left:62.5%}.ivu-col-md-order-15{-ms-flex-order:15;order:15}.ivu-col-span-md-14{display:block;width:58.33333333%}.ivu-col-md-push-14{left:58.33333333%}.ivu-col-md-pull-14{right:58.33333333%}.ivu-col-md-offset-14{margin-left:58.33333333%}.ivu-col-md-order-14{-ms-flex-order:14;order:14}.ivu-col-span-md-13{display:block;width:54.16666667%}.ivu-col-md-push-13{left:54.16666667%}.ivu-col-md-pull-13{right:54.16666667%}.ivu-col-md-offset-13{margin-left:54.16666667%}.ivu-col-md-order-13{-ms-flex-order:13;order:13}.ivu-col-span-md-12{display:block;width:50%}.ivu-col-md-push-12{left:50%}.ivu-col-md-pull-12{right:50%}.ivu-col-md-offset-12{margin-left:50%}.ivu-col-md-order-12{-ms-flex-order:12;order:12}.ivu-col-span-md-11{display:block;width:45.83333333%}.ivu-col-md-push-11{left:45.83333333%}.ivu-col-md-pull-11{right:45.83333333%}.ivu-col-md-offset-11{margin-left:45.83333333%}.ivu-col-md-order-11{-ms-flex-order:11;order:11}.ivu-col-span-md-10{display:block;width:41.66666667%}.ivu-col-md-push-10{left:41.66666667%}.ivu-col-md-pull-10{right:41.66666667%}.ivu-col-md-offset-10{margin-left:41.66666667%}.ivu-col-md-order-10{-ms-flex-order:10;order:10}.ivu-col-span-md-9{display:block;width:37.5%}.ivu-col-md-push-9{left:37.5%}.ivu-col-md-pull-9{right:37.5%}.ivu-col-md-offset-9{margin-left:37.5%}.ivu-col-md-order-9{-ms-flex-order:9;order:9}.ivu-col-span-md-8{display:block;width:33.33333333%}.ivu-col-md-push-8{left:33.33333333%}.ivu-col-md-pull-8{right:33.33333333%}.ivu-col-md-offset-8{margin-left:33.33333333%}.ivu-col-md-order-8{-ms-flex-order:8;order:8}.ivu-col-span-md-7{display:block;width:29.16666667%}.ivu-col-md-push-7{left:29.16666667%}.ivu-col-md-pull-7{right:29.16666667%}.ivu-col-md-offset-7{margin-left:29.16666667%}.ivu-col-md-order-7{-ms-flex-order:7;order:7}.ivu-col-span-md-6{display:block;width:25%}.ivu-col-md-push-6{left:25%}.ivu-col-md-pull-6{right:25%}.ivu-col-md-offset-6{margin-left:25%}.ivu-col-md-order-6{-ms-flex-order:6;order:6}.ivu-col-span-md-5{display:block;width:20.83333333%}.ivu-col-md-push-5{left:20.83333333%}.ivu-col-md-pull-5{right:20.83333333%}.ivu-col-md-offset-5{margin-left:20.83333333%}.ivu-col-md-order-5{-ms-flex-order:5;order:5}.ivu-col-span-md-4{display:block;width:16.66666667%}.ivu-col-md-push-4{left:16.66666667%}.ivu-col-md-pull-4{right:16.66666667%}.ivu-col-md-offset-4{margin-left:16.66666667%}.ivu-col-md-order-4{-ms-flex-order:4;order:4}.ivu-col-span-md-3{display:block;width:12.5%}.ivu-col-md-push-3{left:12.5%}.ivu-col-md-pull-3{right:12.5%}.ivu-col-md-offset-3{margin-left:12.5%}.ivu-col-md-order-3{-ms-flex-order:3;order:3}.ivu-col-span-md-2{display:block;width:8.33333333%}.ivu-col-md-push-2{left:8.33333333%}.ivu-col-md-pull-2{right:8.33333333%}.ivu-col-md-offset-2{margin-left:8.33333333%}.ivu-col-md-order-2{-ms-flex-order:2;order:2}.ivu-col-span-md-1{display:block;width:4.16666667%}.ivu-col-md-push-1{left:4.16666667%}.ivu-col-md-pull-1{right:4.16666667%}.ivu-col-md-offset-1{margin-left:4.16666667%}.ivu-col-md-order-1{-ms-flex-order:1;order:1}.ivu-col-span-md-0{display:none}.ivu-col-md-push-0{left:auto}.ivu-col-md-pull-0{right:auto}}@media (min-width:1200px){.ivu-col-span-lg-1,.ivu-col-span-lg-10,.ivu-col-span-lg-11,.ivu-col-span-lg-12,.ivu-col-span-lg-13,.ivu-col-span-lg-14,.ivu-col-span-lg-15,.ivu-col-span-lg-16,.ivu-col-span-lg-17,.ivu-col-span-lg-18,.ivu-col-span-lg-19,.ivu-col-span-lg-2,.ivu-col-span-lg-20,.ivu-col-span-lg-21,.ivu-col-span-lg-22,.ivu-col-span-lg-23,.ivu-col-span-lg-24,.ivu-col-span-lg-3,.ivu-col-span-lg-4,.ivu-col-span-lg-5,.ivu-col-span-lg-6,.ivu-col-span-lg-7,.ivu-col-span-lg-8,.ivu-col-span-lg-9{float:left;-ms-flex:0 0 auto;flex:0 0 auto}.ivu-col-span-lg-24{display:block;width:100%}.ivu-col-lg-push-24{left:100%}.ivu-col-lg-pull-24{right:100%}.ivu-col-lg-offset-24{margin-left:100%}.ivu-col-lg-order-24{-ms-flex-order:24;order:24}.ivu-col-span-lg-23{display:block;width:95.83333333%}.ivu-col-lg-push-23{left:95.83333333%}.ivu-col-lg-pull-23{right:95.83333333%}.ivu-col-lg-offset-23{margin-left:95.83333333%}.ivu-col-lg-order-23{-ms-flex-order:23;order:23}.ivu-col-span-lg-22{display:block;width:91.66666667%}.ivu-col-lg-push-22{left:91.66666667%}.ivu-col-lg-pull-22{right:91.66666667%}.ivu-col-lg-offset-22{margin-left:91.66666667%}.ivu-col-lg-order-22{-ms-flex-order:22;order:22}.ivu-col-span-lg-21{display:block;width:87.5%}.ivu-col-lg-push-21{left:87.5%}.ivu-col-lg-pull-21{right:87.5%}.ivu-col-lg-offset-21{margin-left:87.5%}.ivu-col-lg-order-21{-ms-flex-order:21;order:21}.ivu-col-span-lg-20{display:block;width:83.33333333%}.ivu-col-lg-push-20{left:83.33333333%}.ivu-col-lg-pull-20{right:83.33333333%}.ivu-col-lg-offset-20{margin-left:83.33333333%}.ivu-col-lg-order-20{-ms-flex-order:20;order:20}.ivu-col-span-lg-19{display:block;width:79.16666667%}.ivu-col-lg-push-19{left:79.16666667%}.ivu-col-lg-pull-19{right:79.16666667%}.ivu-col-lg-offset-19{margin-left:79.16666667%}.ivu-col-lg-order-19{-ms-flex-order:19;order:19}.ivu-col-span-lg-18{display:block;width:75%}.ivu-col-lg-push-18{left:75%}.ivu-col-lg-pull-18{right:75%}.ivu-col-lg-offset-18{margin-left:75%}.ivu-col-lg-order-18{-ms-flex-order:18;order:18}.ivu-col-span-lg-17{display:block;width:70.83333333%}.ivu-col-lg-push-17{left:70.83333333%}.ivu-col-lg-pull-17{right:70.83333333%}.ivu-col-lg-offset-17{margin-left:70.83333333%}.ivu-col-lg-order-17{-ms-flex-order:17;order:17}.ivu-col-span-lg-16{display:block;width:66.66666667%}.ivu-col-lg-push-16{left:66.66666667%}.ivu-col-lg-pull-16{right:66.66666667%}.ivu-col-lg-offset-16{margin-left:66.66666667%}.ivu-col-lg-order-16{-ms-flex-order:16;order:16}.ivu-col-span-lg-15{display:block;width:62.5%}.ivu-col-lg-push-15{left:62.5%}.ivu-col-lg-pull-15{right:62.5%}.ivu-col-lg-offset-15{margin-left:62.5%}.ivu-col-lg-order-15{-ms-flex-order:15;order:15}.ivu-col-span-lg-14{display:block;width:58.33333333%}.ivu-col-lg-push-14{left:58.33333333%}.ivu-col-lg-pull-14{right:58.33333333%}.ivu-col-lg-offset-14{margin-left:58.33333333%}.ivu-col-lg-order-14{-ms-flex-order:14;order:14}.ivu-col-span-lg-13{display:block;width:54.16666667%}.ivu-col-lg-push-13{left:54.16666667%}.ivu-col-lg-pull-13{right:54.16666667%}.ivu-col-lg-offset-13{margin-left:54.16666667%}.ivu-col-lg-order-13{-ms-flex-order:13;order:13}.ivu-col-span-lg-12{display:block;width:50%}.ivu-col-lg-push-12{left:50%}.ivu-col-lg-pull-12{right:50%}.ivu-col-lg-offset-12{margin-left:50%}.ivu-col-lg-order-12{-ms-flex-order:12;order:12}.ivu-col-span-lg-11{display:block;width:45.83333333%}.ivu-col-lg-push-11{left:45.83333333%}.ivu-col-lg-pull-11{right:45.83333333%}.ivu-col-lg-offset-11{margin-left:45.83333333%}.ivu-col-lg-order-11{-ms-flex-order:11;order:11}.ivu-col-span-lg-10{display:block;width:41.66666667%}.ivu-col-lg-push-10{left:41.66666667%}.ivu-col-lg-pull-10{right:41.66666667%}.ivu-col-lg-offset-10{margin-left:41.66666667%}.ivu-col-lg-order-10{-ms-flex-order:10;order:10}.ivu-col-span-lg-9{display:block;width:37.5%}.ivu-col-lg-push-9{left:37.5%}.ivu-col-lg-pull-9{right:37.5%}.ivu-col-lg-offset-9{margin-left:37.5%}.ivu-col-lg-order-9{-ms-flex-order:9;order:9}.ivu-col-span-lg-8{display:block;width:33.33333333%}.ivu-col-lg-push-8{left:33.33333333%}.ivu-col-lg-pull-8{right:33.33333333%}.ivu-col-lg-offset-8{margin-left:33.33333333%}.ivu-col-lg-order-8{-ms-flex-order:8;order:8}.ivu-col-span-lg-7{display:block;width:29.16666667%}.ivu-col-lg-push-7{left:29.16666667%}.ivu-col-lg-pull-7{right:29.16666667%}.ivu-col-lg-offset-7{margin-left:29.16666667%}.ivu-col-lg-order-7{-ms-flex-order:7;order:7}.ivu-col-span-lg-6{display:block;width:25%}.ivu-col-lg-push-6{left:25%}.ivu-col-lg-pull-6{right:25%}.ivu-col-lg-offset-6{margin-left:25%}.ivu-col-lg-order-6{-ms-flex-order:6;order:6}.ivu-col-span-lg-5{display:block;width:20.83333333%}.ivu-col-lg-push-5{left:20.83333333%}.ivu-col-lg-pull-5{right:20.83333333%}.ivu-col-lg-offset-5{margin-left:20.83333333%}.ivu-col-lg-order-5{-ms-flex-order:5;order:5}.ivu-col-span-lg-4{display:block;width:16.66666667%}.ivu-col-lg-push-4{left:16.66666667%}.ivu-col-lg-pull-4{right:16.66666667%}.ivu-col-lg-offset-4{margin-left:16.66666667%}.ivu-col-lg-order-4{-ms-flex-order:4;order:4}.ivu-col-span-lg-3{display:block;width:12.5%}.ivu-col-lg-push-3{left:12.5%}.ivu-col-lg-pull-3{right:12.5%}.ivu-col-lg-offset-3{margin-left:12.5%}.ivu-col-lg-order-3{-ms-flex-order:3;order:3}.ivu-col-span-lg-2{display:block;width:8.33333333%}.ivu-col-lg-push-2{left:8.33333333%}.ivu-col-lg-pull-2{right:8.33333333%}.ivu-col-lg-offset-2{margin-left:8.33333333%}.ivu-col-lg-order-2{-ms-flex-order:2;order:2}.ivu-col-span-lg-1{display:block;width:4.16666667%}.ivu-col-lg-push-1{left:4.16666667%}.ivu-col-lg-pull-1{right:4.16666667%}.ivu-col-lg-offset-1{margin-left:4.16666667%}.ivu-col-lg-order-1{-ms-flex-order:1;order:1}.ivu-col-span-lg-0{display:none}.ivu-col-lg-push-0{left:auto}.ivu-col-lg-pull-0{right:auto}}
</style>`;

// handleUtil.js
handleUtil.title = function (title) {
  title = title || '默认名称';
  window.document.title = title;
};

handleUtil.printPage = function (id, css, title) {
  // 设置打印时候的标题
  handleUtil.title(title);
  let iFrame = document.createElement('IFRAME');
  iFrame.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;font-weight:400');
  document.body.appendChild(iFrame);
  let doc = iFrame.contentWindow.document;
  let content = document.getElementById(id).innerHTML;
  // console.log(content + css + layoutStyle);
  doc.write(css);
  doc.write(layoutStyle);
  doc.write(content);
  // doc.write(content + css + layoutStyle);
  doc.close();
  iFrame.contentWindow.focus();
  iFrame.onload = function () { //解决图片显示不了的问题
    iFrame.contentWindow.print();
    document.body.removeChild(iFrame);
  };
  // 重置标题为默认
  handleUtil.title();
};
// 使用方法
util.printPage('printPage', css, title);

Foreach循环中return

在foreach中return只能终止当前循环，不能终止foreach以后的程序，因为foreach接收的是一个回调函数，这个回调函数的底层是一个for，终止的是这个回调函数中的for循环。

function fun() {
	for (let i = 0; i < 10; 1++) {
		if (i > 4) {
			return;
		}
	}
	console.log(1);
}
// 输出 1
fun();

深度克隆

// 使用插件lodash
import _ from 'lodash';
const data  = _.cloneDeep(dataList);
// 通过JSON.parse 这种如果属性有深层对象，会出现克隆无效现象。
const data = JSON.parse(JSON.stringify(dataList));

vue

路由跳转传值

// 对于命名路由name query，parma 都可以传值
this.$router.push({
	name: '',
	path: {}
	// 或
	param: {}
});
// 对于路径跳转 只能通过query传值，parma会默认过滤掉
this.$router.push({
	path: '',
	query: {}
});

路由监听路由的监听

父组件只能监听改父组件下的子组件路由的变化 也就是说在子组件中监听不到路由变化。同级路由是无法监听路由的。

$route(to, from){};
// 或
'$route': {
	handler(to, from) {
	},
	deep: true, // 是否深度监听
	immediate: true // 是否立即监听
}

keep-alive

生命周期

activated和deactivated只有在keep-alive才触发。

activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated