优化树/展开行

2026-01-21 05:27:57 +08:00 · 2022-05-08 14:04:04 +08:00
parent 16d6160b93
commit 3c28ba67ef
5 changed files with 54 additions and 71 deletions
--- a/examples/views/table/tree/Sort.vue
+++ b/examples/views/table/tree/Sort.vue
@@ -1,16 +1,14 @@
 <template>
  <div>
    <p class="tip">
-      实现树结构深层排序<br>
+      树结构排序<br>
    </p>

    <vxe-table
-      max-height="600"
+      height="600"
      :loading="demo1.loading"
      :data="demo1.tableData"
-      :sort-config="{remote: true}"
-      :tree-config="{children: 'children'}"
-      @sort-change="sortChangeEvent">
+      :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}">
      <vxe-column field="id" title="ID" width="80"></vxe-column>
      <vxe-column field="name" title="名称" tree-node></vxe-column>
      <vxe-column field="size" title="大小" width="140"></vxe-column>
@@ -29,15 +27,12 @@

 <script lang="ts">
 import { defineComponent, reactive } from 'vue'
-import { VxeTablePropTypes, VxeTableEvents } from '../../../../types/index'
-import XEUtils from 'xe-utils'

 export default defineComponent({
  setup () {
    const demo1 = reactive({
-      filterName: '',
      loading: false,
-      originData: [
+      tableData: [
        { id: 1000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
        { id: 1005, parentId: 1000, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
        { id: 24300, parentId: 1000, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
@@ -48,44 +43,18 @@ export default defineComponent({
        { id: 22200, parentId: 20045, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
        { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
        { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
-      ],
-      tableData: [] as any[]
+      ]
    })

-    // 模拟后台接口
-    const findList = (order?: VxeTablePropTypes.SortOrder) => {
-      demo1.loading = true
-      setTimeout(() => {
-        demo1.loading = false
-        // 将有关联的列表转成树结构
-        if (order === 'asc') {
-          demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: false })
-        } else if (order === 'desc') {
-          demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: true })
-        } else {
-          demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId' })
-        }
-      }, 300)
-    }
-
-    const sortChangeEvent: VxeTableEvents.SortChange = ({ order }) => {
-      findList(order)
-    }
-
-    findList()
-
    return {
      demo1,
-      sortChangeEvent,
      demoCodes: [
        `
        <vxe-table
-          max-height="600"
+          height="600"
          :loading="demo1.loading"
          :data="demo1.tableData"
-          :sort-config="{remote: true}"
-          :tree-config="{children: 'children'}"
-          @sort-change="sortChangeEvent">
+          :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}">
          <vxe-column field="id" title="ID" width="80"></vxe-column>
          <vxe-column field="name" title="名称" tree-node></vxe-column>
          <vxe-column field="size" title="大小" width="140"></vxe-column>
@@ -95,15 +64,12 @@ export default defineComponent({
        `,
        `
        import { defineComponent, reactive } from 'vue'
-        import { VxeTablePropTypes, VxeTableEvents } from 'vxe-table'
-        import XEUtils from 'xe-utils'

        export default defineComponent({
          setup () {
            const demo1 = reactive({
-              filterName: '',
              loading: false,
-              originData: [
+              tableData: [
                { id: 1000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
                { id: 1005, parentId: 1000, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
                { id: 24300, parentId: 1000, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
@@ -115,34 +81,10 @@ export default defineComponent({
                { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
                { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
              ],
-              tableData: [] as any[]
            })

-            // 模拟后台接口
-            const findList = (order?: VxeTablePropTypes.SortOrder) => {
-              demo1.loading = true
-              setTimeout(() => {
-                demo1.loading = false
-                // 将有关联的列表转成树结构
-                if (order === 'asc') {
-                  demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: false })
-                } else if (order === 'desc') {
-                  demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: true })
-                } else {
-                  demo1.tableData = XEUtils.toArrayTree(demo1.originData, { key: 'id', parentKey: 'parentId' })
-                }
-              }, 300)
-            }
-
-            const sortChangeEvent: VxeTableEvents.SortChange = ({ order }) => {
-              findList(order)
-            }
-
-            findList()
-
            return {
-              demo1,
-              sortChangeEvent
+              demo1
            }
          }
        })
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.2.3",
+  "version": "4.2.4-beta.1",
  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/packages/table/src/body.ts
+++ b/packages/table/src/body.ts
@@ -347,16 +347,27 @@ export default defineComponent({
          _rowIndex = rest._index
        }
        const params = { $table: $xetable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
+        // 行是否被展开
+        const isExpandRow = expandColumn && rowExpandeds.length && $xetable.findRowIndexOf(rowExpandeds, row) > -1
+        // 树节点是否被展开
+        let isExpandTree = false
+        let rowChildren = []
        // 处理新增状态
        let isNewRow = false
        if (editConfig) {
          isNewRow = $xetable.findRowIndexOf(editStore.insertList, row) > -1
        }
+        if (treeConfig && !scrollYLoad && !transform && treeExpandeds.length) {
+          rowChildren = row[treeOpts.children]
+          isExpandTree = rowChildren && rowChildren.length && $xetable.findRowIndexOf(treeExpandeds, row) > -1
+        }
        rows.push(
          h('tr', {
-            class: ['vxe-body--row', {
+            class: ['vxe-body--row', treeConfig ? `row--level-${rowLevel}` : '', {
              'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
              'is--new': isNewRow,
+              'is--expand-row': isExpandRow,
+              'is--expand-tree': isExpandTree,
              'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
              'row--radio': radioOpts.highlight && selectRow === row,
              'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row)
@@ -370,7 +381,7 @@ export default defineComponent({
          }))
        )
        // 如果行被展开了
-        if (expandColumn && rowExpandeds.length && $xetable.findRowIndexOf(rowExpandeds, row) > -1) {
+        if (isExpandRow) {
          let cellStyle
          if (treeConfig) {
            cellStyle = {
--- a/packages/table/src/emits.ts
+++ b/packages/table/src/emits.ts
@@ -59,8 +59,10 @@ export default [
  'clear-cell-area-merge',
  'header-cell-area-selection',
  'cell-area-selection-start',
+  'cell-area-selection-drag',
  'cell-area-selection-end',
  'cell-area-extension-start',
+  'cell-area-extension-drag',
  'cell-area-extension-end',
  'cell-area-arrows-start',
  'cell-area-arrows-end',
--- a/types/plugins/pro.d.ts
+++ b/types/plugins/pro.d.ts
@@ -281,6 +281,12 @@ export namespace VxeTableProDefines {
  }
  export interface CellAreaSelectionStartEventParams extends EventParams, CellAreaSelectionStartParams { }

+  export interface CellAreaSelectionDragParams {
+    rows: any[]
+    cols: VxeTableDefines.ColumnInfo[]
+  }
+  export interface CellAreaSelectionDragEventParams extends EventParams, CellAreaSelectionDragParams { }
+
  export interface CellAreaSelectionEndParams {
    rows: any[]
    cols: VxeTableDefines.ColumnInfo[]
@@ -290,6 +296,14 @@ export namespace VxeTableProDefines {
  export interface CellAreaExtensionStartParams extends CellAreaSelectionStartParams {}
  export interface CellAreaExtensionStartEventParams extends EventParams, CellAreaExtensionStartParams { }

+  export interface CellAreaExtensionDragParams {
+    rows: any[]
+    cols: VxeTableDefines.ColumnInfo[]
+    targetRows: any[]
+    targetCols: VxeTableDefines.ColumnInfo[]
+  }
+  export interface CellAreaExtensionDragEventParams extends EventParams, CellAreaExtensionDragParams { }
+
  export interface CellAreaExtensionEndParams {
    rows: any[]
    cols: VxeTableDefines.ColumnInfo[]
@@ -349,8 +363,10 @@ export type VxeTableProEmits = [
  'clear-cell-area-merge',
  'header-cell-area-selection',
  'cell-area-selection-start',
+  'cell-area-selection-drag',
  'cell-area-selection-end',
  'cell-area-extension-start',
+  'cell-area-extension-drag',
  'cell-area-extension-end',
  'cell-area-arrows-start',
  'cell-area-arrows-end',
@@ -373,8 +389,10 @@ declare module '../table' {
    onClearCellAreaMerge?: VxeTableEvents.ClearCellAreaMerge
    onHeaderCellAreaSelection?: VxeTableEvents.HeaderCellAreaSelection
    onCellAreaSelectionStart?: VxeTableEvents.CellAreaSelectionStart
+    onCellAreaSelectionDrag?: VxeTableEvents.CellAreaSelectionDrag
    onCellAreaSelectionEnd?: VxeTableEvents.CellAreaSelectionEnd
    onCellAreaExtensionStart?: VxeTableEvents.CellAreaExtensionStart
+    onCellAreaExtensionDrag?: VxeTableEvents.CellAreaExtensionDrag
    onCellAreaExtensionEnd?: VxeTableEvents.CellAreaExtensionEnd
    onCellAreaArrowsStart?: VxeTableEvents.CellAreaArrowsStart
    onCellAreaArrowsEnd?: VxeTableEvents.CellAreaArrowsEnd
@@ -395,8 +413,10 @@ declare module '../table' {
    clearCellAreaMerge?: VxeTableEvents.ClearCellAreaMerge
    headerCellAreaSelection?: VxeTableEvents.HeaderCellAreaSelection
    cellAreaSelectionStart?: VxeTableEvents.CellAreaSelectionStart
+    cellAreaSelectionDrag?: VxeTableEvents.CellAreaSelectionDrag
    cellAreaSelectionEnd?: VxeTableEvents.CellAreaSelectionEnd
    cellAreaExtensionStart?: VxeTableEvents.CellAreaExtensionStart
+    cellAreaExtensionDrag?: VxeTableEvents.CellAreaExtensionDrag
    cellAreaExtensionEnd?: VxeTableEvents.CellAreaExtensionEnd
    cellAreaArrowsStart?: VxeTableEvents.CellAreaArrowsStart
    cellAreaArrowsEnd?: VxeTableEvents.CellAreaArrowsEnd
@@ -417,8 +437,10 @@ declare module '../table' {
    export type ClearCellAreaMerge = (params: VxeTableProDefines.ClearCellAreaMergeEventParams) => void
    export type HeaderCellAreaSelection = (params: VxeTableProDefines.HeaderCellAreaSelectionEventParams) => void
    export type CellAreaSelectionStart = (params: VxeTableProDefines.CellAreaSelectionStartEventParams) => void
+    export type CellAreaSelectionDrag = (params: VxeTableProDefines.CellAreaSelectionDragEventParams) => void
    export type CellAreaSelectionEnd = (params: VxeTableProDefines.CellAreaSelectionEndEventParams) => void
    export type CellAreaExtensionStart = (params: VxeTableProDefines.CellAreaExtensionStartEventParams) => void
+    export type CellAreaExtensionDrag = (params: VxeTableProDefines.CellAreaExtensionDragEventParams) => void
    export type CellAreaExtensionEnd = (params: VxeTableProDefines.CellAreaExtensionEndEventParams) => void
    export type CellAreaArrowsStart = (params: VxeTableProDefines.CellAreaArrowsStartEventParams) => void
    export type CellAreaArrowsEnd = (params: VxeTableProDefines.CellAreaArrowsEndEventParams) => void
@@ -442,8 +464,10 @@ declare module '../grid' {
    onClearCellAreaMerge?: VxeGridEvents.ClearCellAreaMerge
    onHeaderCellAreaSelection?: VxeGridEvents.HeaderCellAreaSelection
    onCellAreaSelectionStart?: VxeGridEvents.CellAreaSelectionStart
+    onCellAreaSelectionDrag?: VxeGridEvents.CellAreaSelectionDrag
    onCellAreaSelectionEnd?: VxeGridEvents.CellAreaSelectionEnd
    onCellAreaExtensionStart?: VxeGridEvents.CellAreaExtensionStart
+    onCellAreaExtensionDrag?: VxeGridEvents.CellAreaExtensionDrag
    onCellAreaExtensionEnd?: VxeGridEvents.CellAreaExtensionEnd
    onCellAreaArrowsStart?: VxeGridEvents.CellAreaArrowsStart
    onCellAreaArrowsEnd?: VxeGridEvents.CellAreaArrowsEnd
@@ -463,8 +487,10 @@ declare module '../grid' {
    clearCellAreaMerge?: VxeGridEvents.ClearCellAreaMerge
    headerCellAreaSelection?: VxeGridEvents.HeaderCellAreaSelection
    cellAreaSelectionStart?: VxeGridEvents.CellAreaSelectionStart
-    cellAreaSelectionEnd?: VxeGridEvents.CellAreaSelectionEnd
+    cellAreaSelectionDrag?: VxeGridEvents.CellAreaSelectionEnd
+    cellAreaSelectionEnd?: VxeGridEvents.CellAreaSelectionDrag
    cellAreaExtensionStart?: VxeGridEvents.CellAreaExtensionStart
+    cellAreaExtensionDrag?: VxeGridEvents.CellAreaExtensionDrag
    cellAreaExtensionEnd?: VxeGridEvents.CellAreaExtensionEnd
    cellAreaArrowsStart?: VxeGridEvents.CellAreaArrowsStart
    cellAreaArrowsEnd?: VxeGridEvents.CellAreaArrowsEnd
@@ -485,8 +511,10 @@ declare module '../grid' {
    export type ClearCellAreaMerge = (params: VxeTableProDefines.ClearCellAreaMergeParams) => void
    export type HeaderCellAreaSelection = (params: VxeTableProDefines.HeaderCellAreaSelectionParams) => void
    export type CellAreaSelectionStart = (params: VxeTableProDefines.CellAreaSelectionStartEventParams) => void
+    export type CellAreaSelectionDrag = (params: VxeTableProDefines.CellAreaSelectionDragEventParams) => void
    export type CellAreaSelectionEnd = (params: VxeTableProDefines.CellAreaSelectionEndEventParams) => void
    export type CellAreaExtensionStart = (params: VxeTableProDefines.CellAreaExtensionStartEventParams) => void
+    export type CellAreaExtensionDrag = (params: VxeTableProDefines.CellAreaExtensionDragEventParams) => void
    export type CellAreaExtensionEnd = (params: VxeTableProDefines.CellAreaExtensionEndEventParams) => void
    export type CellAreaArrowsStart = (params: VxeTableProDefines.CellAreaArrowsStartEventParams) => void
    export type CellAreaArrowsEnd = (params: VxeTableProDefines.CellAreaArrowsEndEventParams) => void