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

￡神魔★判官ぃ 2023-06-23 05:54 20阅读 0赞

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

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

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

#### 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）][element_css]

[element_css]: https://www.jianshu.com/p/4ff9a5397427