feat: 新增勾选渲染行底色和初始化渲染行底色的功能

examples/features/test.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="test">
+      <flex-table
+        :row-class-name="rowClassName" :selectedColor="'#90EE90'" :columns="column1" :data="data1">
+      </flex-table>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            column1: [
+                {
+                    type: 'selection',
+                    width: 20,
+                    align: 'center',
+                    fixed: 'left',
+                },
+                {
+                    title: 'Name',
+                    key: 'name',
+                },
+                {
+                    title: 'Age',
+                    key: 'age',
+                    className: 'flag-one',
+                },
+                {
+                    title: 'Address',
+                    key: 'address',
+                },
+            ],
+            data1: [
+                {
+                    name: 'jack',
+                    age: '18',
+                    address: 'New York No. 1 Lake Park',
+                    cellClassName: {
+                        name: 'flag-two',
+                    },
+                },
+                {
+                    name: 'jack2',
+                    age: '18',
+                    address: 'New York No. 1 Lake Park',
+                },
+                {
+                    name: 'jack',
+                    age: '18',
+                    address: 'New York No. 1 Lake Park',
+                },
+                {
+                    name: 'jack',
+                    age: '18',
+                    address: 'New York No. 1 Lake Park',
+                },
+                {
+                    name: 'jack',
+                    age: '18',
+                    address: 'New York No. 1 Lake Park',
+                },
+            ],
+        }
+    },
+    methods: {
+        rowClassName (row, index) {
+            if (index === 4) {
+                return 'flag-three';
+            }
+            if (row.name === 'jack2'){
+                return 'flag-four'
+            }
+        },
+    },
+}
+</script>
+
+<style lang="less">
+.flag-one{
+    background-color: yellow;
+}
+.flag-two{
+    background-color: Violet ;
+}
+.flag-four{
+    background-color: aquamarine;
+}
+.flag-three{
+    background-color: LightPink ;
+}
+</style>

examples/routes.js

@@ -95,4 +95,12 @@ export default [
             title: '风格样式',
         },
     },
+    {
+        path: '/test',
+        name: 'test',
+        component: resolve => require(['./features/test.vue'], resolve),
+        meta: {
+            title: '初始渲染/勾选渲染',
+        },
+    },
 ];

src/mixin.js

@@ -28,5 +28,17 @@ export default {
 
             return oStyle;
         },
+        alignCls (column, row = {}) {
+            let cellClassName = '';
+            if (row.cellClassName && column.key && row.cellClassName[column.key]) {
+                cellClassName = row.cellClassName[column.key];
+            }
+            return [
+                {
+                    [`${cellClassName}`]: cellClassName, // cell className
+                    [`${column.className}`]: column.className, // column className
+                },
+            ];
+        },
     },
 };

src/table.vue

@@ -30,6 +30,7 @@
                 :no-data="noData"
                 :scrollTop="scrollTop"
                 :hoverIndex="hoverIndex"
+                :selectedColor="selectedColor"
                 @scroll.native.passive="syncScroll"
                 @on-toggle-select="toggleSelect"
             ></table-body>
@@ -69,6 +70,7 @@
                 :rowHeight="rowHeight"
                 :scrollTop="scrollTop"
                 :hoverIndex="hoverIndex"
+                :selectedColor="selectedColor"
                 @on-toggle-select="toggleSelect"
             ></table-body>
 
@@ -107,6 +109,7 @@
                     :rowHeight="rowHeight"
                     :scrollTop="scrollTop"
                     :hoverIndex="hoverIndex"
+                    :selectedColor="selectedColor"
                     @on-toggle-select="toggleSelect"
                 ></table-body>
 
@@ -272,7 +275,17 @@ export default {
         fixedHeadTop: {
             type: Number,
             default: 0
-        }
+        },
+        selectedColor: {
+            type: String,
+            default: '',
+        },
+        rowClassName: {
+            type: Function,
+            default: () => {
+                return '';
+            },
+        },
     },
     data(){
         return {

src/tableBody.vue

@@ -16,6 +16,7 @@
                     :onlyFixed="onlyFixed"
                     :rowHeight="rowHeight[index]"
                     :hoverIndex="hoverIndex"
+                    :style="[row._isChecked ? selectedCls : '']"
                     @on-toggle-select="toggleSelect"
                     @on-toggle-expand="toggleExpand"
                 ></table-tr>
@@ -73,7 +74,11 @@ export default {
         hoverIndex: {
             type: Number | undefined,
             required: true
-        }
+        },
+        selectedColor: {
+            type: String,
+            default: '',
+        },
     },
     computed: {
         style() {
@@ -91,7 +96,13 @@ export default {
                 }
             });
             return render;
-        }
+        },
+        selectedCls() {
+            const flag = {
+                'background-color': this.selectedColor,
+            }
+            return flag
+        },
     },
     watch: {
         scrollTop(scrollTop) {

src/tableTd.vue

@@ -1,11 +1,6 @@
 <template>
     <div
-        :class="{
-            'flex-table-col': true,
-            'flex-table-col-icon': renderType === 'expand',
-            'flex-table-expand-disabled': renderType === 'expand' && row._disableExpand,
-            'flex-table-hidden': isInvisible
-            }"
+        :class="cellClsName(column, row)"
         :style="setCellStyle(column)"
         @click="onToggleExpand"
         ref="cell">
@@ -114,7 +109,29 @@ export default {
             if (this.renderType !== 'expand') { return; }
             this.expandOpen = !this.expandOpen;
             this.$emit('on-toggle-expand');
-        }
+        },
+        flexTableCol() {
+            return 'flex-table-col'
+        },
+        flexTableColIcon() {
+            return this.renderType === 'expand' ? 'flex-table-col-icon' : ''
+        },
+        flexTableExpandDisabled() {
+            return (this.renderType === 'expand' && this.row._disableExpand)
+                ? 'flex-table-expand-disabled' : ''
+        },
+        flexTableHidden() {
+            return this.isInvisible ? 'flex-table-hidden' : ''
+        },
+        cellClsName(column, row) {
+            return [
+                this.flexTableCol(),
+                this.flexTableColIcon(),
+                this.flexTableExpandDisabled(),
+                this.flexTableHidden(),
+                this.alignCls(column, row),
+            ]
+        },
     }
 }
 </script>

src/tableTr.vue

@@ -9,6 +9,7 @@
             :row="row"
             :rowIndex="rowIndex"
             :onlyFixed="onlyFixed"
+            :class="tdClassName(column, row)"
             @on-toggle-select="toggleSelect"
             @on-toggle-expand="toggleExpand"
         ></table-td>
@@ -84,7 +85,15 @@ export default {
         },
         mouseenter() {
             this.owner.updateHoverIndex(this.rowIndex);
-        }
+        },
+        rowClsName(_index) {
+            return this.$parent.$parent.rowClassName(this.row, _index);
+        },
+        tdClassName() {
+            return [
+                this.rowClsName(this.rowIndex),
+            ]
+        },
     }
 }
 </script>