浏览代码

feat:修复表格的奇数偶数行不生效的问题

liu.shiyi 2 年之前
父节点
当前提交
053f4f4536
共有 1 个文件被更改,包括 12 次插入13 次删除
  1. 12 13
      data-room-ui/packages/BasicComponents/Tables/index.vue

+ 12 - 13
data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -14,7 +14,7 @@
       :data="config.option.tableData"
       :data="config.option.tableData"
       :header-cell-style="headerCellStyle"
       :header-cell-style="headerCellStyle"
       :cell-style="cellStyle"
       :cell-style="cellStyle"
-      :row-class-name="tableRowClassName"
+      :row-style="rowStyle"
       @row-click="rowClick"
       @row-click="rowClick"
     >
     >
       <el-table-column
       <el-table-column
@@ -115,6 +115,17 @@ export default {
     this.chartInit()
     this.chartInit()
   },
   },
   methods: {
   methods: {
+    rowStyle ({ row, rowIndex }) {
+      if (rowIndex % 2) {
+        return {
+          backgroundColor: this.config.customize.evenRowBackgroundColor
+        }
+      } else {
+        return {
+          backgroundColor: this.config.customize.oddRowBackgroundColor
+        }
+      }
+    },
     // 表格点击事件
     // 表格点击事件
     rowClick (row) {
     rowClick (row) {
       this.linkage(row)
       this.linkage(row)
@@ -169,21 +180,9 @@ export default {
       } else if (!(!config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor)) {
       } else if (!(!config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor)) {
         config.customize.bodyBackgroundColor = ''
         config.customize.bodyBackgroundColor = ''
       }
       }
-      window.requestAnimationFrame(() => {
-        document.querySelectorAll(`.even-row${config.code}`).forEach(node => {
-          node.style.backgroundColor = config.customize.evenRowBackgroundColor
-        })
-        document.querySelectorAll(`.odd-row${config.code}`).forEach(node => {
-          node.style.backgroundColor = config.customize.oddRowBackgroundColor
-        })
-      })
       this.updateKey = new Date().getTime()
       this.updateKey = new Date().getTime()
       return config
       return config
     },
     },
-    // 表格行样式
-    tableRowClassName ({ row, rowIndex }) {
-      return rowIndex % 2 === 0 ? `even-row${this.config.code}` : `odd-row${this.config.code}`
-    },
     dataFormatting (config, data) {
     dataFormatting (config, data) {
       config.option.tableData = data?.data
       config.option.tableData = data?.data
       const filteredData = {}
       const filteredData = {}