element的table组件el-table通过方法动态改变样式

1. 首先< el-table >代码（属性尽可能多）

• 下面是一个table组件中，先有一个 type=“selection” 多选组件，然后是< template >循环列
• 把所有动态的属性值放在一个对象中tableStyle
• 使用以下两个方法改变表格的样式

:header-cell-style="headCellStyle"		//表头
:cell-style="cellStyle"					//行

<div id="building-top">
	<el-table
		:data="tableData"
		border
		:stripe="this.tableStyle.isStripe"
		:height="this.tableStyle.height"
		:highlight-current-row="this.tableStyle.hcr"
		:show-summary="this.tableStyle.showSummary"
		:header-cell-style="headCellStyle"
		:cell-style="cellStyle"
	>
		<el-table-column v-if="this.tableStyle.checkbox" type="selection" width="55"></el-table-column>
			
		<template v-for="(item, index) in keysData"><!--:fixed="fixed[index]"-->
			<el-table-column
					:fixed="item.fixed"
					:sortable="item.sortable"
					:prop="item.name"
					:label="item.name"
					width="200"
			>
			</el-table-column>
		</template>
	</el-table>
</div>

2. data

data() {
	return {
		//关于表格的样式
		tableStyle:{
			isStripe: false,	//斑马纹
			height: undefined,	//表格高（固定高时使用）
			hcr: false,			//是否要高亮当前行
			checkbox: false,	//是否在最左侧列添加多选组件
			showSummary: false,	//是否在表尾显示合计行
			
			//表头  在unTableAdapter()方法中初始化赋值
			headTextAlign: 'left',		//表头字体居左、居右、居中
			headBackground: '#FFFFFF',	//表头背景色
			headColor: '#909399',		//表头字体颜色
			headFontWeight: '1000',		//表头字体加粗
			headHeight: '23',			//表头的行高
			//行
			cellTextAlign: 'left',		//行内字体居左、居右、居中
			cellBackground: '#FFFFFF',	//行内背景色
			cellColor: '#606266',		//行内字体颜色
			cellFontWeight: '500',		//行内字体加粗
			cellHeight: '23',			//行高
		}
	}
}

3. 两个修改样式的方法(初始化时运行即可生效)

methods: {
	//头部
	headCellStyle(row, rowIndex){
		return 'text-align: ' + this.tableStyle.headTextAlign +  //内容居左/中/右
				';background: ' + this.tableStyle.headBackground +  //背景色
				';color: ' + this.tableStyle.headColor +       //字体颜色
				';font-weight: ' + this.tableStyle.headFontWeight +   //字体加粗
				';height: ' + this.tableStyle.headHeight + 'px;'
				;
	},
	//行
	cellStyle(row, rowIndex){
		return 'text-align: ' + this.tableStyle.cellTextAlign +  //内容居左/中/右
				';background: ' + this.tableStyle.cellBackground +  //背景色
				';color: ' + this.tableStyle.cellColor +       //字体颜色
				';font-weight: ' + this.tableStyle.cellFontWeight +   //字体加粗
				';height: ' + this.tableStyle.cellHeight + 'px;'
				;
	}
}

4. 也可以直接在< style >中改变

• 修改表头背景

#building-top .el-table th{
    background: #344067;
  }

参考：element表格样式修改（直接改css）