自定義表格的表頭根據(jù)后端的數(shù)據(jù)進(jìn)行篩選是否進(jìn)行自定義表頭添加按鈕

自定義表格的表頭根據(jù)后端的數(shù)據(jù)進(jìn)行篩選是否進(jìn)行自定義表頭添加按鈕

<template><div class="box"><el-table :data="msgMapList" border class="table"><el-table-column v-for="column in titleMapList" :key="column.code" :prop="column.propFlag" :label="column.value"><template #header="{ column }"><div><span>{{ column.label }}</span><button v-if="column.property === '1'">按鈕</button></div></template><template #default="{ row }"><div :class="getColumnStyle(column, row)">{{ row[column.code] }}</div><!-- <divv-if="column.symbol == 1":class="row[column.compareOne] == row[column.compareTwo]? column.class: ''">{{ row[column.code] }}</div> --></template></el-table-column></el-table></div>
</template><script>
export default {props: {titleMapList: {type: Array,},msgMapList: {type: Array,},type: {type: String,},},data() {return {mainSource: "",};},mounted() {this.titleMapList.forEach((item) => {if (item.isMain === "1") {this.mainSource = item.code;return;}});},methods: {getColumnStyle(column, row) {console.log("this.type------", this.type);if (this.type === "2") {// 變色 居右if (column.colorFlag === "1" &&row[column.code] != row[this.mainSource]) {return "color-class table-left";}// 不變色 居右if (column.isMain === "1" || column.colorFlag === "1") {return "table-left";}} else {if (column.colorFlag === "1") {if (row[column.code] != row[this.mainSource]) {return "color-class"; //'color-class'}}}},},
};
</script>

• 注意：表頭插槽拿到的column 和內(nèi)容插槽拿到的內(nèi)容不一致，header插槽的label對(duì)應(yīng)el-table-column的label，prop對(duì)應(yīng)header插槽的property

效果：