v2.9.0

添加实例方法：
1、行高亮选中

Author: huangshuwei

examples/src/docs/en/ve-table/api/db.js

@@ -471,6 +471,11 @@ export const db = {
                 desc: `Scroll the table to the location of the row key`,
                 param: "{rowKey}",
             },
+            {
+                name: "setHighlightRow",
+                desc: `Set highlight row <a href='#/en/doc/table/row-style?anchor=row-click-highlight'>Refer To Demo</a>`,
+                param: "{rowKey}",
+            },
         ],
         columns: columnsType2,
     },

examples/src/docs/en/ve-table/row-style/click-highlight.md

@@ -1,11 +1,15 @@
 :::anchor Row Click highlight
 
-:::demo By default, line click highlight is on, Must set `row-key-field-name`
+:::demo 1、By default, line click highlight is on, Must set `row-key-field-name`<br>2、You can set the highlighted row through the `setHighlightRow` instance method
 
 ```html
 <template>
     <div>
+        <button class="button-demo" @click="setHighlightRow(1002)">Highlight Row 2</button>
+        <br />
+        <br />
         <ve-table
+            ref="tableRef"
             :row-style-option="rowStyleOption"
             :columns="columns"
             :table-data="tableData"
@@ -93,6 +97,12 @@
                 ],
             };
         },
+        methods: {
+            // set highlight row
+            setHighlightRow(rowKey) {
+                this.$refs["tableRef"].setHighlightRow({ rowKey: rowKey });
+            },
+        },
     };
 </script>
 ```

examples/src/docs/zh/ve-table/api/db.js

@@ -471,6 +471,11 @@ export const db = {
                 desc: `将表格滚动到行为rowKey的位置`,
                 param: "{rowKey}",
             },
+            {
+                name: "setHighlightRow",
+                desc: `设置高亮的行 <a href='#/zh/doc/table/row-style?anchor=row-click-highlight'>参考示例</a>`,
+                param: "{rowKey}",
+            },
         ],
         columns: columnsType2,
     },

examples/src/docs/zh/ve-table/row-style/click-highlight.md

@@ -1,11 +1,15 @@
 :::anchor 行 click 高亮
 
-:::demo 默认行 click 高亮效果开启。要设置`row-key-field-name`
+:::demo 1、默认行 click 高亮效果开启。要设置`row-key-field-name`<br>2、可以通过 `setHighlightRow`实例方法设置高亮行
 
 ```html
 <template>
     <div>
+        <button class="button-demo" @click="setHighlightRow(1002)">选中第2行</button>
+        <br />
+        <br />
         <ve-table
+            ref="tableRef"
             :row-style-option="rowStyleOption"
             :columns="columns"
             :table-data="tableData"
@@ -93,6 +97,12 @@
                 ],
             };
         },
+        methods: {
+            // set highlight row
+            setHighlightRow(rowKey) {
+                this.$refs["tableRef"].setHighlightRow({ rowKey: rowKey });
+            },
+        },
     };
 </script>
 ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-easytable",
-    "version": "2.8.3",
+    "version": "2.9.0",
     "main": "libs/main.js",
     "description": "Vue table component",
     "keywords": [

packages/index.js

@@ -12,7 +12,7 @@ import VeSelect from './ve-select';
 import VeTable from './ve-table';
 
 
-const version = '2.8.3';
+const version = '2.9.0';
 const components = [
   VeCheckbox,
   VeCheckboxGroup,

packages/ve-table/src/body/index.jsx

@@ -88,6 +88,11 @@ export default {
                 return null;
             },
         },
+        // highlight row key
+        highlightRowKey: {
+            type: [String, Number],
+            default: null,
+        },
         // event custom option
         eventCustomOption: {
             type: Object,
@@ -134,8 +139,6 @@ export default {
             1、存储当前单选功能的rowkey 信息
             */
             internalRadioSelectedRowKey: null,
-            // highlight row key
-            highlightRowKey: "",
         };
     },
     // 存储非响应式数据
@@ -383,7 +386,7 @@ export default {
             // 行高亮功能
             if (rowKeyFieldName) {
                 const rowKey = rowData[rowKeyFieldName];
-                this.highlightRowKey = rowKey;
+                this.$emit(EMIT_EVENTS.HIGHLIGHT_ROW_CHANGE, { rowKey });
             }
 
             // 行展开功能

packages/ve-table/src/index.jsx

@@ -239,6 +239,8 @@ export default {
             2、当 max-height="calc(100vh - 210px)" 或者 max-height="80%" 时使用 tableOffestHeight
             */
             tableOffestHeight: 0,
+            // highlight row key
+            highlightRowKey: "",
         };
     },
     // 存储非响应式数据
@@ -1097,6 +1099,10 @@ export default {
                 behavior: "smooth",
             });
         },
+        // set highlight row
+        [INSTANCE_METHODS.SET_HIGHLIGHT_ROW]({ rowKey }) {
+            this.highlightRowKey = rowKey;
+        },
     },
     mounted() {
         // receive row selected change
@@ -1200,11 +1206,14 @@ export default {
                 cellSelectionKeyData: this.cellSelectionKeyData,
                 allRowKeys: this.allRowKeys,
                 editOption: this.editOption,
+                highlightRowKey: this.highlightRowKey,
             },
             on: {
                 [EMIT_EVENTS.BODY_TD_WIDTH_CHANGE]: tdWidthChange,
                 [EMIT_EVENTS.CELL_SELECTION_KEY_CHANGE]:
                     this.cellSelectionKeyChange,
+                [EMIT_EVENTS.HIGHLIGHT_ROW_CHANGE]:
+                    this[INSTANCE_METHODS.SET_HIGHLIGHT_ROW],
             },
         };
 

packages/ve-table/src/util/constant.js

@@ -56,6 +56,8 @@ export const EMIT_EVENTS = {
     HEADER_FILTER_CONFIRM: "on-filter-confirm",
     // header filter reset
     HEADER_FILTER_RESET: "on-filter-reset",
+    // highlight row change
+    HIGHLIGHT_ROW_CHANGE: "on-highlight-row-change",
 };
 
 // comps name
@@ -90,4 +92,6 @@ export const INSTANCE_METHODS = {
     SCROLL_TO: "scrollTo",
     // scroll to rowKey
     SCROLL_TO_ROW_KEY: "scrollToRowKey",
+    // set highlight row
+    SET_HIGHLIGHT_ROW: "setHighlightRow",
 };

tests/unit/specs/ve-table-row-style.spec.js

@@ -123,4 +123,27 @@ describe("veTable row style", () => {
 
         expect(firstTr.classes()).toContain("ve-table-tr-highlight");
     });
+
+    it("row highlight by setHighlightRow method", async () => {
+        const wrapper = mount(veTable, {
+            propsData: {
+                columns: COLUMNS,
+                tableData: TABLE_DATA,
+                rowStyleOption: {
+                    stripe: true,
+                    hoverHighlight: true,
+                    clickHighlight: true,
+                },
+                rowKeyFieldName: "rowKey",
+            },
+        });
+
+        wrapper.vm.setHighlightRow({ rowKey: 2 });
+
+        await later();
+
+        const highlightRow = wrapper.findAll(".ve-table-body-tr").at(2);
+
+        expect(highlightRow.classes()).toContain("ve-table-tr-highlight");
+    });
 });