elementui设置表头与表格(左对齐,背景颜色,字体大小等)

490 阅读1分钟

 headerStyle控制表头,finalCellStyle控制表格

html

<div class="table1">
										<el-table
										   size="mini"
										   :data="tableDataLeft"
										   border
										   stripe
										   :default-sort="defaultSort"
										   :max-height="tableMaxH"
										   :header-cell-style="headerStyle"
										   :cell-style="finalCellStyle"
										   >
											<el-table-column align="center"
											  prop="entryName"
											  label="项目名称"
											  width="164"
											  
											 >
											</el-table-column>
										   <el-table-column align="center"
											 prop="date"
											 label="评审日期"
											>
										   </el-table-column>
										   <el-table-column align="center"
											 prop="reviewReport"
											 label="评审报告"
											 >
										   </el-table-column>
										   <el-table-column align="center"
											 prop="isAdopt"
											 label="是否通过"
											  >
										   </el-table-column>
										 </el-table>
									</div>

方法


		headerStyle() {
		  return {
		    background: "#043B79",
		    padding: "5px 0",
		    borderColor: "#006CC1",
		    textAlign: "center",
		    color: "#FEFEFE",
			fontSize:"16px"
		  };
		},
		headerStyle2() {
		  return {
		    background: "#063B63",
		    padding: "5px 0",
		    borderColor: "#006CC1",
		    textAlign: "left",
		    color: "#FEFEFE",
			fontSize:"16px"
		  };
		},
		finalCellStyle(row) {
		  let style = {
		    background: "rgba(0, 108, 193,0)",
		    padding: "0px 0",
		    borderColor: "#006CC1",
		    textAlign: "center",
		    color: "#C7E3FF",
		    fontSize:"14px"
			
		  };
		  return style;	 
		},