element-UI-----vue表格修改某个单元格的样式（可以增加html结构）

<el-table-column 
      prop="date"
      label="日期/(生产旺季)" 
      width="180" 
      align='center' 
      :render-header="renderHeader"/>


methods:{
   renderHeader(h, { column, $index }) {
            let columnArr = column.label.split("/");//此处换行标志
            if (columnArr.length >= 2) {
                let divArr = [];
                columnArr.map((item) => {
                    if(item == columnArr[0]){
                        divArr.push(h("div", { style: "text-align: center "}, item));
                    }else{
                        divArr.push(h("span", { style:"text-align:right;color:#fc5563;font-size:12px"}, item));
                    }
                });
                return h("span", {style:"display: line-block"}, divArr);
            }
            return h("span", {}, column.label);
        },
}

 

render-header就可以做更复杂的样式，增加布局上的修改

render-header加在表格的列el-table-column 上