Merge branch 'master' of https://github.com/tm-fe/FlexTable

examples/features/addColor.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="test">
+      <flex-table
+        :row-class-name="rowClassName" :selectedClass="'selected-class'" :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">
+.selected-class{
+    background-color:chocolate;
+}
+.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: '/addColor',
+        name: 'addColor',
+        component: resolve => require(['./features/addColor.vue'], resolve),
+        meta: {
+            title: '初始渲染/勾选渲染',
+        },
+    },
 ];

readme.md

@@ -43,6 +43,8 @@ To view demo examples locally clone the repo and run `yarn install && yarn dev`
 - [x] selectable
 - [x] expand 嵌套功能
 - [x] 异步渲染
+- [x] selectable模式下渲染选中行背景色
+- [x] 初始化渲染行、列、单元格背景色
 - [ ] 合并单元格
 - [ ] 拖动改变列顺序
 
@@ -141,6 +143,8 @@ export default {
 | stripe | 行的斑纹显示 | Boolean | true |
 | fixedHead | 全屏固定头部 | Boolean | false |
 | fixedHeadTop | 全屏固定头部离顶部距离 | Number | 0 |
+| selectedClass | 单选或多选模式下,渲染选中行样式 | string | '' |
+| rowClassName | 初始化渲染行背景色 | Function | '' |
 
 ### Table events
 
@@ -172,6 +176,18 @@ export default {
 | resizable | 是否可拖动调整列宽(必须设置table props 的 resizable 为 true 才生效) | Boolean | - |
 | minWidth | 最小列宽(优先级高于table props) | number | - |
 | maxWidth | 拖动调整时，可调的最大列宽, 默认不限制(优先级高于table props) | number | - |
+| className | 初始化渲染列的背景色 | string | '' |
+
+### data
+行描述数据对象，是 list 中的一项
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ------------ | ------- | ------- | ----------- |
+| cellClassName | 指定任意一个单元格的背景色 | Object | {} |
+
+### 特别说明
+行类名、列类名、单元格类名和选中行类名的权重由它们的定义顺序决定
+定义在后面的权重相对较大
 
 ### Table slot
 

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

src/tableBody.vue

@@ -16,6 +16,7 @@
                     :onlyFixed="onlyFixed"
                     :rowHeight="rowHeight[index]"
                     :hoverIndex="hoverIndex"
+                    :selectedClass="selectedClass"
                     @on-toggle-select="toggleSelect"
                     @on-toggle-expand="toggleExpand"
                 ></table-tr>
@@ -73,7 +74,11 @@ export default {
         hoverIndex: {
             type: Number | undefined,
             required: true
-        }
+        },
+        selectedClass: {
+            type: String,
+            default: '',
+        },
     },
     computed: {
         style() {

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>
@@ -45,6 +46,10 @@ export default {
         },
         hoverIndex: {
             type: Number | undefined
+        },
+        selectedClass: {
+            type: String,
+            default: ''
         }
     },
     mounted() {
@@ -84,7 +89,19 @@ export default {
         },
         mouseenter() {
             this.owner.updateHoverIndex(this.rowIndex);
-        }
+        },
+        rowClsName(_index) {
+            return this.$parent.$parent.rowClassName(this.row, _index);
+        },
+        selectedCls(row) {
+            return row._isChecked ? this.selectedClass : ''
+        },
+        tdClassName() {
+            return [
+                this.selectedCls(this.row),
+                this.rowClsName(this.rowIndex),
+            ]
+        },
     }
 }
 </script>