element-ui相关配置

element-ui相关配置

表格

1、修改表格的 hover 样式

.el-table /deep/ .el-table__body tr:hover>td {
    background-color: #dcecf9 !important;
}

/* 加!important 可以修改树状表格子节点的hover样式 */

2、固定表头（跟element-ui自带的有点区别）

.el-table /deep/ .el-table__body-wrapper {
  height: calc(100% - 78px);  // 高度根据实际情况修改
  overflow-y: auto;
}

element-ui自带

只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

注意：如果表格右边框的话，可能会在右上角多一处空白

这两种方法可以根据具体情况使用

3、自定义树形表格的图标

/deep/.el-icon-arrow-right:before {
	content: "\e6d9";
}
/deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before{
	content: "\e6d8"!important;
}
/deep/.el-table__expand-icon--expanded {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
/deep/.el-table__expand-icon {
	border: 1px solid #e7e7e7;
	padding:1px;
}

4、时间选择器，限制开始时间和结束时间
准备两个时间选择器组件

<el-date-picker v-model="form.startDate" :type="date" placeholder="请选择开始时间" :picker-options="startTime" />
<el-date-picker v-model="form.startDate" :type="date" placeholder="请选择结束时间" :picker-options="endTime" />

然后在data中定义两个变量

data(){
	return {
		form: {
			startDate: '',
			endDate: ''
		},
		startTime: {
        	disabledDate: time => {
          		if (this.form.endDate) {
            		return time.getTime() > new Date(this.form.endDate).getTime()
          		}
        	}
      	},
      	endTime: {
        	disabledDate: time => {
          		if (this.form.startDate) {
            		return time.getTime() < new Date(this.form.startDate).getTime()
          		}	
        	}
      	}
	}
}

5、重置表单，并清除校验

// 利用 resetFields方法
this.$refs.formData.resetFields();

6、选择框组件，多选后出现抖动的问题，修改 margin

.el-select .el-tag {
  margin: 0;
  margin-left: 3px;
  margin-top: 2px;
}

7、表格行 hover 效果

.el-table tr:hover {
	&>td{
		background: #F2F9FC;
	}
}

继续补充中。。。