自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮-Toy模板网

这篇具有很好参考价值的文章主要介绍了自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮

<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>
					<!-- <div
						v-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>