vue3+elementui实现表格样式可配置

后端接口传回的数据格式如下图
需要依靠后端传回的数据控制表格样式

实现代码

<!-- 可视化配置-表格 -->
<template>
  <div class="tabulation_main" ref="myDiv">
    <!-- 尝试过在mounted中使用this.$refs.myDiv.offsetHeight,获取父元素高度赋值给height的方法,发现该值只能在created之前确定,且不为动态 -->
    <el-table
      :data="tableData"
      :stripe="tableStyleObj.tableStyle.stripe == 'true' ? true : false"
      :row-style="rowStyleHandle"
      :row-class-name="tableRowClassName"
      :border="tableStyleObj.tableStyle.border == 'true' ? true : false"
      v-model:align="tableStyleObj.tableStyle.bodyTextAlign"
      :show-header="tableStyleObj.tableStyle.showHeader == 'true' ? true : false"
      :header-cell-style="{
        color: tableStyleObj.tableStyle.headerColor,
        'font-size': tableStyleObj.tableStyle.headerFontSize + 'px',
        'text-align': tableStyleObj.tableStyle.headerTextAlign,
      }"
      :header-row-class-name="headerRowClassName"
      :height="tableStyleObj.tableStyle.tableHeight + ''"
      style="width: 100%"
    >
      <!-- 固定序号列 -->
      <el-table-column
        v-if="tableStyleObj.tableStyle.isShowTableIndex == 'true' ? true : false"
        :fixed="tableStyleObj.tableStyle.isTableIndexFixed == 'true' ? true : false"
        type="index"
        :width="tableStyleObj.tableStyle.tableIndexWidth + ''"
      ></el-table-column>
      <el-table-column
        v-for="(tableItem, tableIndex) in tableStyleObj.tableColStyle"
        :key="tableIndex"
        :prop="tableItem.prop"
        :label="tableItem.label"
        :width="tableItem.width + ''"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableStyleObj: {
        // 表格整体样式
        tableStyle: {},
        // 表格列配置
        tableColStyle: [],
      },
      tableData: [],
    };
  },
  props: {
    flatteningCurrentItemForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    nthColor() {
      return this.tableStyleObj.tableStyle.nthColor;
    },
    othColor() {
      return this.tableStyleObj.tableStyle.othColor;
    },
    headerBackground() {
      return this.tableStyleObj.tableStyle.headerBackground;
    },
  },
  created() {
    // 获取表格配置
    this.tableStyleObj.tableStyle = this.flatteningCurrentItemForm.attributeCaseMap;
    this.tableStyleObj.tableColStyle = JSON.parse(
      this.flatteningCurrentItemForm.attributeCaseMap.tableColstyle
    );
    // 获取表格数据
    tableDataSource({
      dataSource: this.flatteningCurrentItemForm.dataSource,
    }).then((res) => {
      this.tableData = res.data;
    });
  },
  methods: {
    headerRowClassName({ row, rowIndex }) {
      return "head-row";
    },
    rowStyleHandle({ row, rowIndex }) {
      // rowIndex从0开始
      if (rowIndex % 2 == 0) {
        // 奇数行
        var obj = {
          "text-align": this.tableStyleObj.tableStyle.bodyTextAlign,
          color: this.tableStyleObj.tableStyle.bodyColor,
          "font-size": this.tableStyleObj.tableStyle.bodyFontSize + "px",
        };
        return obj;
      } else {
        // 偶数行
        var obj = {
          "text-align": this.tableStyleObj.tableStyle.bodyTextAlign,
          color: this.tableStyleObj.tableStyle.bodyColor,
          "font-size": this.tableStyleObj.tableStyle.bodyFontSize + "px",
        };
        return obj;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "even-row";
      } else {
        return "odd-row";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.tabulation_main {
  // 表格表头
  ::v-deep(.el-table .el-table__header-wrapper th),
  ::v-deep(.el-table .el-table__fixed-header-wrapper th) {
    background-color: v-bind("headerBackground") !important;
  }
  // 表格斑马纹
  ::v-deep(.even-row td) {
    background-color: v-bind("nthColor") !important;
  }
  ::v-deep(.odd-row td) {
    background-color: v-bind("othColor") !important;
  }
  ::v-deep(.el-table) {
    background-color: v-bind("nthColor") !important;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139