前端组件，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