djm-ui 0.0.0-stage → 0.67.2

package/src/components/table/index.js

@@ -0,0 +1,847 @@
+import Empty from '../empty/index.js'
+import Icon from '../icon/index.js'
+import { t } from '../../locale/index.js'
+
+/**
+ * 数据表格：列配置 + 具名插槽，替代各页面手写的表头/空状态/加载遮罩
+ *
+ * columns: [{ key, label, width, align, class, headerClass, cellClass, sortable, sorter, fixed, children }]
+ * children 用于多级表头，分组本身不参与排序与单元格渲染
+ * 单元格插槽：<template #cell-user="{ row, value, index }">...</template>
+ * 选择：v-model:selected="selected"（值为 row[rowKey]）
+ */
+
+// 是否配置了子列（空数组按普通列处理）
+function hasChildren (column) {
+  return Array.isArray(column.children) && column.children.length > 0
+}
+
+// 一个节点下有多少叶子列，用于分组表头的 colspan
+function leafCount (node) {
+  if (!hasChildren(node)) return 1
+  return node.children.reduce((sum, child) => sum + leafCount(child), 0)
+}
+
+export default {
+  name: 'DjmTable',
+  components: { DjmEmpty: Empty, DjmIcon: Icon },
+  props: {
+    columns: { type: Array, required: true },
+    rows: { type: Array, default: () => [] },
+    rowKey: { type: String, default: 'id' },
+    selected: { type: Array, default: () => [] },
+    selectable: { type: Boolean, default: false },
+    showIndex: { type: Boolean, default: false },
+    // 分页场景下用于让序号跨页连续
+    indexOffset: { type: Number, default: 0 },
+    loading: { type: Boolean, default: false },
+    loadingText: { type: String, default: '' },
+    striped: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    emptyText: { type: String, default: '' },
+    emptyHint: { type: String, default: '' },
+    emptyIcon: { type: String, default: 'clipboard' },
+    // 排序受控值：列设置 sortable 后由组件回传，业务侧可 v-model 绑定
+    sortKey: { type: String, default: '' },
+    sortDir: { type: String, default: '' },
+    // 展开行：true 或 (row) => boolean
+    expandable: { type: [Boolean, Function], default: false },
+    expanded: { type: Array, default: () => [] },
+    // 行样式：字符串或 (row, index) => string
+    rowClass: { type: [String, Function], default: '' },
+    // 滚动区域高度：设置后表头吸顶，配合列 fixed 使用
+    maxHeight: { type: [Number, String], default: '' },
+    // 显示列设置按钮，可勾选要展示的列
+    columnSetting: { type: Boolean, default: false },
+    // 显示导出按钮，导出当前排序后的全部行
+    exportable: { type: Boolean, default: false },
+    // 导出文件名前缀，最终为 前缀-YYYY-MM-DD.csv
+    exportName: { type: String, default: 'export' },
+    // 表头右侧拖拽调整列宽，双击分割线恢复配置宽度
+    resizable: { type: Boolean, default: false },
+    // 拖拽时的最小列宽
+    minColumnWidth: { type: Number, default: 60 },
+    // 表格最小宽度，默认走样式里的 900px；列少或容器窄时可调小避免横向滚动
+    minWidth: { type: [Number, String], default: '' },
+    // 行拖拽排序：行首出现手柄，拖放后抛 row-drop 由业务重排数据
+    rowDraggable: { type: Boolean, default: false },
+    // 单行是否允许拖动，(row, index) => boolean
+    allowRowDrag: { type: Function, default: null },
+    // 虚拟滚动：只渲染可视区行，需要同时设置 max-height；展开行模式不支持
+    virtual: { type: Boolean, default: false },
+    // 虚拟滚动的行高，需与实际渲染高度一致，否则滚动位置会漂移
+    rowHeight: { type: Number, default: 44 },
+    // 可视区上下多渲染几行，避免快速滚动出现空白
+    overscan: { type: Number, default: 6 }
+  },
+  emits: [
+    'update:selected',
+    'row-click',
+    'row-dblclick',
+    'update:sortKey',
+    'update:sortDir',
+    'sort-change',
+    'update:expanded',
+    'export',
+    'column-resize',
+    'column-resize-end',
+    'row-drop'
+  ],
+  data () {
+    return {
+      hiddenColumns: [],
+      settingOpen: false,
+      // 拖拽后的列宽：key -> px，未拖拽的列沿用 column.width
+      colWidths: {},
+      // 拖拽中的列，用于高亮分割线
+      resizeState: null,
+      // 行拖拽：起始行与当前落点
+      rowDragState: null,
+      rowDropState: null,
+      // 虚拟滚动状态
+      scrollTop: 0,
+      viewportHeight: 0
+    }
+  },
+  computed: {
+    // 去掉分组层级，按钮叶子列顺序铺平；单元格、排序、导出一律按叶子处理
+    leafColumns () {
+      const flat = []
+      const walk = (list, parent) => {
+        list.forEach((column) => {
+          if (hasChildren(column)) {
+            walk(column.children, column)
+            return
+          }
+          // 带上分组信息，列设置里能看出归属
+          flat.push(parent ? { ...column, groupKey: parent.key, groupLabel: parent.label } : column)
+        })
+      }
+      walk(this.columns, null)
+      return flat
+    },
+    // 列设置隐藏后的可见列（叶子）
+    visibleColumns () {
+      return this.leafColumns.filter((column) => !this.hiddenColumns.includes(column.key))
+    },
+    // 表头树：保留分组结构，隐藏的叶子连同空分组一起去掉
+    headerTree () {
+      const strip = (list) =>
+        list
+          .map((column) => (hasChildren(column) ? { ...column, children: strip(column.children) } : { ...column }))
+          .filter((column) => (hasChildren(column) ? column.children.length > 0 : !this.hiddenColumns.includes(column.key)))
+      return strip(this.columns)
+    },
+    // 表头按层铺开，分组用 colspan，无子节点的列用 rowspan 补齐剩余行
+    headerRows () {
+      const rows = []
+      const depthOf = (node) => (hasChildren(node) ? 1 + Math.max(...node.children.map(depthOf)) : 1)
+      const maxDepth = this.headerTree.reduce((max, node) => Math.max(max, depthOf(node)), 1)
+
+      const collect = (nodes, depth) => {
+        if (!rows[depth]) rows[depth] = []
+        nodes.forEach((node) => {
+          if (hasChildren(node)) {
+            rows[depth].push({ node, colspan: leafCount(node), rowspan: 1, group: true })
+            collect(node.children, depth + 1)
+          } else {
+            rows[depth].push({ node, colspan: 1, rowspan: maxDepth - depth, group: false })
+          }
+        })
+      }
+
+      collect(this.headerTree, 0)
+      return rows
+    },
+    colSpan () {
+      return this.visibleColumns.length +
+        (this.selectable ? 1 : 0) +
+        (this.showIndex ? 1 : 0) +
+        (this.expandable ? 1 : 0) +
+        (this.rowDraggable ? 1 : 0)
+    },
+    // 是否存在左右固定列
+    hasFixed () {
+      return this.visibleColumns.some((column) => column.fixed === 'left' || column.fixed === 'right')
+    },
+    // 前置列（拖拽手柄 / 展开 / 选择 / 序号）的左侧偏移：有固定列时一并吸边
+    prependOffsets () {
+      if (!this.hasFixed) return null
+      const offsets = { drag: null, expand: null, select: null, index: null, base: 0 }
+      let left = 0
+      if (this.rowDraggable) {
+        offsets.drag = left
+        left += 36
+      }
+      if (this.expandable) {
+        offsets.expand = left
+        left += 38
+      }
+      if (this.selectable) {
+        offsets.select = left
+        left += 42
+      }
+      if (this.showIndex) {
+        offsets.index = left
+        left += 52
+      }
+      offsets.base = left
+      return offsets
+    },
+    // 固定列偏移表：key -> { side, offset, edge }
+    stickyMap () {
+      if (!this.hasFixed) return {}
+      const columns = this.visibleColumns
+      const map = {}
+      let left = this.prependOffsets ? this.prependOffsets.base : 0
+      columns.forEach((column) => {
+        if (column.fixed !== 'left') return
+        map[column.key] = { side: 'left', offset: left, edge: false }
+        left += this.columnWidth(column)
+      })
+      let right = 0
+      for (let i = columns.length - 1; i >= 0; i--) {
+        const column = columns[i]
+        if (column.fixed !== 'right') continue
+        map[column.key] = { side: 'right', offset: right, edge: false }
+        right += this.columnWidth(column)
+      }
+      // 标记贴边列，用于投影分隔
+      const leftKeys = columns.filter((column) => column.fixed === 'left').map((column) => column.key)
+      const rightKeys = columns.filter((column) => column.fixed === 'right').map((column) => column.key)
+      if (leftKeys.length) map[leftKeys[leftKeys.length - 1]].edge = true
+      if (rightKeys.length) map[rightKeys[0]].edge = true
+      return map
+    },
+    scrollStyle () {
+      if (!this.maxHeight) return {}
+      const value = this.maxHeight
+      // 数字与纯数字字符串都按 px 处理，其余（如 60vh）原样透传
+      if (typeof value === 'number' || /^\d+(\.\d+)?$/.test(value)) {
+        return { maxHeight: value + 'px' }
+      }
+      return { maxHeight: value }
+    },
+    // 最小宽度：覆盖样式里的 900px，列少的窄容器不再被迫横向滚动
+    tableStyle () {
+      const value = this.minWidth
+      if (value === '' || value === null || value === undefined) return {}
+      if (typeof value === 'number' || /^\d+(\.\d+)?$/.test(value)) {
+        return { minWidth: value + 'px' }
+      }
+      return { minWidth: value }
+    },
+    loadingLabel () {
+      return this.loadingText || t('table.loading')
+    },
+    emptyLabel () {
+      return this.emptyText || t('table.empty')
+    },
+    selectAllLabel () {
+      return t('table.selectAll')
+    },
+    selectRowLabel () {
+      return t('table.selectRow')
+    },
+    scrollRegionLabel () {
+      return t('table.scrollRegion')
+    },
+    allChecked () {
+      return this.rows.length > 0 && this.rows.every((row) => this.isSelected(row))
+    },
+    someChecked () {
+      return !this.allChecked && this.rows.some((row) => this.isSelected(row))
+    },
+    // 排序只影响展示顺序，不改变原始 rows
+    displayRows () {
+      if (!this.sortKey || !this.sortDir) return this.rows
+      // 多级表头的子列也能排序，按叶子列查找
+      const column = this.leafColumns.find((item) => item.key === this.sortKey)
+      if (!column) return this.rows
+      const dir = this.sortDir === 'asc' ? 1 : -1
+      const list = this.rows.slice()
+      if (typeof column.sorter === 'function') {
+        return list.sort((a, b) => column.sorter(a, b) * dir)
+      }
+      return list.sort((a, b) => {
+        const left = a[this.sortKey]
+        const right = b[this.sortKey]
+        if (typeof left === 'number' && typeof right === 'number') return (left - right) * dir
+        return String(left === undefined || left === null ? '' : left)
+          .localeCompare(String(right === undefined || right === null ? '' : right), 'zh-Hans-CN') * dir
+      })
+    },
+
+    /* ---------------- 虚拟滚动 ---------------- */
+
+    // 需要 maxHeight 提供滚动容器；展开行高度不固定，暂不参与虚拟滚动
+    virtualEnabled () {
+      return Boolean(this.virtual && this.maxHeight && !this.expandable)
+    },
+    // 兜底行高，避免配置过小导致计算出负数区间
+    effectiveRowHeight () {
+      return Math.max(16, this.rowHeight)
+    },
+    // 可视区起止行（含 overscan）
+    visibleRange () {
+      const total = this.displayRows.length
+      if (!this.virtualEnabled || !total) return { start: 0, end: total }
+      const rowHeight = this.effectiveRowHeight
+      const viewHeight = this.viewportHeight || rowHeight * 10
+      const start = Math.max(0, Math.floor(this.scrollTop / rowHeight) - this.overscan)
+      const end = Math.min(total, Math.ceil((this.scrollTop + viewHeight) / rowHeight) + this.overscan)
+      return { start, end }
+    },
+    // 实际渲染的行，带原始下标（序号、插槽都用绝对位置）
+    bodyRows () {
+      const { start, end } = this.visibleRange
+      return this.displayRows.slice(start, end).map((row, offset) => ({ row, index: start + offset }))
+    },
+    topPad () {
+      return this.virtualEnabled ? this.visibleRange.start * this.effectiveRowHeight : 0
+    },
+    bottomPad () {
+      if (!this.virtualEnabled) return 0
+      const total = this.displayRows.length
+      return Math.max(0, (total - this.visibleRange.end) * this.effectiveRowHeight)
+    }
+  },
+  mounted () {
+    document.addEventListener('mousedown', this.onDocumentMousedown, true)
+    this.measureViewport()
+  },
+  beforeUnmount () {
+    document.removeEventListener('mousedown', this.onDocumentMousedown, true)
+    document.removeEventListener('mousemove', this.onResizeMove)
+    document.removeEventListener('mouseup', this.onResizeEnd)
+  },
+  methods: {
+    // 记录可视区高度：虚拟滚动用它算需要渲染多少行
+    measureViewport () {
+      const el = this.$refs.wrap
+      if (!el || !this.virtualEnabled) return
+      this.viewportHeight = el.clientHeight
+      this.scrollTop = el.scrollTop
+    },
+    onScroll (event) {
+      if (!this.virtualEnabled) return
+      const el = event.target
+      this.scrollTop = el.scrollTop
+      this.viewportHeight = el.clientHeight
+    },
+    // 列设置：至少保留一列
+    toggleColumn (key) {
+      if (this.hiddenColumns.includes(key)) {
+        this.hiddenColumns = this.hiddenColumns.filter((item) => item !== key)
+        return
+      }
+      if (this.visibleColumns.length <= 1) return
+      this.hiddenColumns = [...this.hiddenColumns, key]
+    },
+    resetColumns () {
+      this.hiddenColumns = []
+    },
+    onDocumentMousedown (event) {
+      if (!this.$refs.root || this.$refs.root.contains(event.target)) return
+      this.settingOpen = false
+    },
+    // 导出当前排序后的全部行，操作列可通过 exportable: false 排除
+    exportCsv () {
+      const columns = this.visibleColumns.filter((column) => column.exportable !== false)
+      if (!columns.length) return
+      const header = columns.map((column) => column.label || column.key)
+      const lines = this.displayRows.map((row) =>
+        columns.map((column) => {
+          const raw = typeof column.exportValue === 'function' ? column.exportValue(row) : row[column.key]
+          return String(raw === undefined || raw === null ? '' : raw).replace(/"/g, '""')
+        })
+      )
+      const csv = '\uFEFF' + [header, ...lines]
+        .map((cols) => cols.map((cell) => `"${cell}"`).join(','))
+        .join('\n')
+
+      this.$emit('export', { rows: this.displayRows.slice(), csv })
+      this.downloadCsv(csv)
+    },
+    downloadCsv (csv) {
+      const now = new Date()
+      // 文件名用本地日期，避免 toISOString 的 UTC 跨天
+      const day = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+      const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }))
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `${this.exportName}-${day}.csv`
+      link.click()
+      URL.revokeObjectURL(url)
+    },
+    isSelected (row) {
+      return this.selected.includes(row[this.rowKey])
+    },
+    canExpand (row) {
+      if (typeof this.expandable === 'function') return Boolean(this.expandable(row))
+      return Boolean(this.expandable)
+    },
+    isExpanded (row) {
+      return this.expanded.includes(row[this.rowKey])
+    },
+    toggleExpand (row) {
+      const id = row[this.rowKey]
+      const next = this.expanded.includes(id)
+        ? this.expanded.filter((item) => item !== id)
+        : [...this.expanded, id]
+      this.$emit('update:expanded', next)
+    },
+    rowClassOf (row, index) {
+      return typeof this.rowClass === 'function' ? this.rowClass(row, index) : this.rowClass
+    },
+    // 固定列宽度：拖拽值优先，未配置宽度时给一个兜底值，保证相邻列偏移不重叠
+    columnWidth (column) {
+      const custom = this.colWidths[column.key]
+      if (typeof custom === 'number') return custom
+      return typeof column.width === 'number' ? column.width : 120
+    },
+    stickyClassOf (column) {
+      const item = this.stickyMap[column.key]
+      if (!item) return ''
+      return [
+        item.side === 'left' ? 'djm-sticky-left' : 'djm-sticky-right',
+        item.edge ? 'djm-sticky-edge' : ''
+      ]
+    },
+    stickyStyleOf (column) {
+      const item = this.stickyMap[column.key]
+      if (!item) return {}
+      return item.side === 'left' ? { left: item.offset + 'px' } : { right: item.offset + 'px' }
+    },
+    // 多行表头吸顶时逐行下移，避免第二行盖住第一行
+    stickyTop (rowIndex) {
+      if (this.headerRows.length <= 1) return {}
+      return { top: rowIndex * (this.compact ? 32 : 38) + 'px' }
+    },
+    // 前置列的吸边类名与偏移
+    prependClass (key) {
+      if (!this.prependOffsets) return ''
+      const offset = this.prependOffsets[key]
+      if (offset === null || offset === undefined) return ''
+      const order = ['drag', 'expand', 'select', 'index'].filter((name) => this.prependOffsets[name] !== null)
+      // 后面还有左固定数据列时，投影由数据列承担
+      const last = order[order.length - 1] === key
+      const hasLeftFixed = this.visibleColumns.some((column) => column.fixed === 'left')
+      return ['djm-sticky-left', last && !hasLeftFixed ? 'djm-sticky-edge' : '']
+    },
+    prependStyle (key) {
+      if (!this.prependOffsets) return {}
+      const offset = this.prependOffsets[key]
+      if (offset === null || offset === undefined) return {}
+      return { left: offset + 'px' }
+    },
+    ariaSort (column) {
+      if (!column.sortable) return undefined
+      if (this.sortKey !== column.key) return 'none'
+      return this.sortDir === 'asc' ? 'ascending' : 'descending'
+    },
+    toggleSort (column) {
+      if (!column.sortable) return
+      let key = column.key
+      let dir = 'asc'
+      if (this.sortKey === column.key && this.sortDir === 'asc') {
+        dir = 'desc'
+      } else if (this.sortKey === column.key && this.sortDir === 'desc') {
+        key = ''
+        dir = ''
+      }
+      this.$emit('update:sortKey', key)
+      this.$emit('update:sortDir', dir)
+      this.$emit('sort-change', { key, dir })
+    },
+    toggleAll (event) {
+      const ids = this.rows.map((row) => row[this.rowKey])
+      if (event.target.checked) {
+        const merged = new Set(this.selected)
+        ids.forEach((id) => merged.add(id))
+        this.$emit('update:selected', [...merged])
+      } else {
+        const current = new Set(ids)
+        this.$emit('update:selected', this.selected.filter((id) => !current.has(id)))
+      }
+    },
+    toggleRow (row) {
+      const id = row[this.rowKey]
+      const next = this.selected.includes(id)
+        ? this.selected.filter((item) => item !== id)
+        : [...this.selected, id]
+      this.$emit('update:selected', next)
+    },
+    cellStyle (column) {
+      // 拖拽过的列固定 px，其余保持列配置（支持数字与 '20%' 这类字符串）
+      const custom = this.colWidths[column.key]
+      let width = ''
+      if (typeof custom === 'number') width = custom + 'px'
+      else if (typeof column.width === 'number') width = column.width + 'px'
+      else if (column.width) width = String(column.width)
+      return {
+        width,
+        minWidth: width,
+        // 固定列锁死宽度，否则自动布局撑开会让偏移量错位
+        maxWidth: column.fixed ? width : '',
+        textAlign: column.align || ''
+      }
+    },
+
+    /* ---------------- 列宽拖拽 ---------------- */
+
+    // 开始拖拽：记录起点与当前实际宽度
+    startResize (event, column) {
+      if (!this.resizable || column.resizable === false) return
+      const th = event.currentTarget.parentNode
+      this.resizeState = {
+        key: column.key,
+        startX: event.clientX,
+        startWidth: th.getBoundingClientRect().width
+      }
+      document.addEventListener('mousemove', this.onResizeMove)
+      document.addEventListener('mouseup', this.onResizeEnd)
+    },
+    onResizeMove (event) {
+      const state = this.resizeState
+      if (!state) return
+      const min = Math.max(40, this.minColumnWidth)
+      const width = Math.round(Math.max(min, state.startWidth + event.clientX - state.startX))
+      this.colWidths = { ...this.colWidths, [state.key]: width }
+      this.$emit('column-resize', { key: state.key, width })
+    },
+    onResizeEnd () {
+      if (!this.resizeState) return
+      const { key } = this.resizeState
+      this.resizeState = null
+      document.removeEventListener('mousemove', this.onResizeMove)
+      document.removeEventListener('mouseup', this.onResizeEnd)
+      this.$emit('column-resize-end', { key, width: this.colWidths[key] })
+    },
+    // 双击分割线恢复该列的配置宽度
+    resetColumnWidth (key) {
+      if (!this.colWidths[key]) return
+      const next = { ...this.colWidths }
+      delete next[key]
+      this.colWidths = next
+    },
+
+    /* ---------------- 行拖拽排序 ---------------- */
+
+    canDragRow (row, index) {
+      if (!this.rowDraggable) return false
+      if (typeof this.allowRowDrag === 'function') return this.allowRowDrag(row, index) !== false
+      return true
+    },
+    isRowDragging (item) {
+      return Boolean(this.rowDragState && this.rowDragState.key === item.row[this.rowKey])
+    },
+    rowDropClassOf (item) {
+      const state = this.rowDropState
+      if (!state || state.key !== item.row[this.rowKey]) return ''
+      return 'djm-is-row-drop-' + state.position
+    },
+    onRowDragStart (item, event) {
+      if (!this.canDragRow(item.row, item.index)) {
+        event.preventDefault()
+        return
+      }
+      this.rowDragState = { key: item.row[this.rowKey], index: item.index }
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', String(item.index))
+      }
+    },
+    // 落点按行高对半分：上半插到前面，下半插到后面
+    dropPositionOf (event) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      const ratio = rect.height ? (event.clientY - rect.top) / rect.height : 0.5
+      return ratio < 0.5 ? 'before' : 'after'
+    },
+    onRowDragOver (item, event) {
+      if (!this.rowDragState) return
+      event.preventDefault()
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+      this.rowDropState = {
+        key: item.row[this.rowKey],
+        index: item.index,
+        position: this.dropPositionOf(event)
+      }
+    },
+    onRowDragLeave (item, event) {
+      const current = event.currentTarget
+      // 行内单元格之间移动也会触发 dragleave，指针仍在行内时不清落点
+      if (current && event.relatedTarget && current.contains(event.relatedTarget)) return
+      if (this.rowDropState && this.rowDropState.key === item.row[this.rowKey]) this.rowDropState = null
+    },
+    onRowDrop (item, event) {
+      const drag = this.rowDragState
+      if (!drag) return
+      event.preventDefault()
+      const state = this.rowDropState
+      const position = state && state.key === item.row[this.rowKey] ? state.position : this.dropPositionOf(event)
+      this.resetRowDrag()
+      if (this.isNoopDrop(drag.index, item.index, position)) return
+      this.$emit('row-drop', {
+        dragIndex: drag.index,
+        dropIndex: item.index,
+        position,
+        dragKey: drag.key,
+        dropKey: item.row[this.rowKey]
+      })
+    },
+    // 拖到自身、或紧邻位置（结果不变）时不抛事件
+    isNoopDrop (from, to, position) {
+      if (from === to) return true
+      if (position === 'after' && to === from - 1) return true
+      if (position === 'before' && to === from + 1) return true
+      return false
+    },
+    onRowDragEnd () {
+      this.resetRowDrag()
+    },
+    resetRowDrag () {
+      this.rowDragState = null
+      this.rowDropState = null
+    }
+  },
+  template: `
+    <div class="djm-table-root" :class="{ 'djm-is-resizing': !!resizeState }" ref="root">
+      <div
+        v-if="columnSetting || exportable || $slots.toolbar || $slots['toolbar-extra']"
+        class="djm-table-tools"
+      >
+        <div class="djm-table-tools-left">
+          <slot name="toolbar" :rows="displayRows"></slot>
+        </div>
+        <div class="djm-table-tools-right">
+          <slot name="toolbar-extra"></slot>
+          <button v-if="exportable" class="djm-btn djm-btn-sm" type="button" @click="exportCsv">
+            <DjmIcon name="download" :size="13" />导出
+          </button>
+          <div v-if="columnSetting" class="djm-table-col-setting">
+            <button class="djm-btn djm-btn-sm" type="button" @click.stop="settingOpen = !settingOpen">
+              <DjmIcon name="sliders" :size="13" />列设置
+            </button>
+            <div v-if="settingOpen" class="djm-table-col-panel">
+              <div class="djm-table-col-head">
+                <span>显示列</span>
+                <button class="djm-link-btn" type="button" @click="resetColumns">重置</button>
+              </div>
+              <!-- 多级表头按叶子列勾选，带上分组名便于识别 -->
+              <label v-for="column in leafColumns" :key="column.key" class="djm-table-col-item">
+                <input
+                  type="checkbox"
+                  :checked="!hiddenColumns.includes(column.key)"
+                  :disabled="visibleColumns.length <= 1 && !hiddenColumns.includes(column.key)"
+                  @change="toggleColumn(column.key)"
+                />
+                <span>{{ column.groupLabel ? column.groupLabel + ' / ' + (column.label || column.key) : (column.label || column.key) }}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="djm-table-wrap"
+        ref="wrap"
+        :class="{ 'djm-is-scrollable': !!maxHeight, 'djm-has-fixed': hasFixed, 'djm-is-virtual': virtualEnabled }"
+        :style="scrollStyle"
+        role="region"
+        :aria-label="scrollRegionLabel"
+        tabindex="0"
+        @scroll="onScroll"
+      >
+      <table class="djm-data-table" :class="{ 'djm-is-striped': striped, 'djm-is-compact': compact, 'djm-is-resizable': resizable }" :style="tableStyle">
+        <thead>
+          <tr v-for="(row, rowIndex) in headerRows" :key="rowIndex">
+            <!-- 前置列只在第一行渲染，并跨全部表头行 -->
+            <th
+              v-if="rowDraggable && rowIndex === 0"
+              :class="['djm-col-drag', prependClass('drag')]"
+              :style="[prependStyle('drag'), stickyTop(rowIndex)]"
+              :rowspan="headerRows.length > 1 ? headerRows.length : undefined"
+              scope="col"
+              aria-label="拖动排序"
+            ></th>
+            <th
+              v-if="expandable && rowIndex === 0"
+              :class="['djm-col-expand', prependClass('expand')]"
+              :style="[prependStyle('expand'), stickyTop(rowIndex)]"
+              :rowspan="headerRows.length > 1 ? headerRows.length : undefined"
+              scope="col"
+            ></th>
+            <th
+              v-if="selectable && rowIndex === 0"
+              :class="['djm-col-check', prependClass('select')]"
+              :style="[prependStyle('select'), stickyTop(rowIndex)]"
+              :rowspan="headerRows.length > 1 ? headerRows.length : undefined"
+              scope="col"
+            >
+              <input type="checkbox" :checked="allChecked" :indeterminate="someChecked" :aria-label="selectAllLabel" @change="toggleAll" />
+            </th>
+            <th
+              v-if="showIndex && rowIndex === 0"
+              :class="['djm-col-index', prependClass('index')]"
+              :style="[prependStyle('index'), stickyTop(rowIndex)]"
+              :rowspan="headerRows.length > 1 ? headerRows.length : undefined"
+              scope="col"
+            >#</th>
+
+            <th
+              v-for="cell in row"
+              :key="cell.node.key"
+              :colspan="cell.colspan > 1 ? cell.colspan : undefined"
+              :rowspan="cell.rowspan > 1 ? cell.rowspan : undefined"
+              :class="[
+                cell.node.class,
+                cell.node.headerClass,
+                cell.group ? 'djm-col-group' : stickyClassOf(cell.node),
+                {
+                  'djm-is-sortable': !cell.group && cell.node.sortable,
+                  'djm-has-resizer': !cell.group && resizable && cell.node.resizable !== false
+                }
+              ]"
+              :style="[cell.group ? {} : cellStyle(cell.node), cell.group ? {} : stickyStyleOf(cell.node), stickyTop(rowIndex)]"
+              :aria-sort="cell.group ? undefined : ariaSort(cell.node)"
+              :scope="cell.group ? 'colgroup' : 'col'"
+              :tabindex="!cell.group && cell.node.sortable ? 0 : undefined"
+              @click="!cell.group && toggleSort(cell.node)"
+              @keydown.enter.prevent="!cell.group && toggleSort(cell.node)"
+              @keydown.space.prevent="!cell.group && toggleSort(cell.node)"
+            >
+              <span class="djm-table-sort">
+                <slot :name="'header-' + cell.node.key" :column="cell.node">{{ cell.node.label }}</slot>
+                <span v-if="!cell.group && cell.node.sortable" class="djm-table-sorter">
+                  <i class="djm-table-sort-up" :class="{ 'djm-is-on': sortKey === cell.node.key && sortDir === 'asc' }"></i>
+                  <i class="djm-table-sort-down" :class="{ 'djm-is-on': sortKey === cell.node.key && sortDir === 'desc' }"></i>
+                </span>
+              </span>
+              <!-- 列宽拖拽分割线：只挂在叶子列，阻止冒泡避免触发排序 -->
+              <span
+                v-if="!cell.group && resizable && cell.node.resizable !== false"
+                class="djm-table-resizer"
+                :class="{ 'djm-is-active': resizeState && resizeState.key === cell.node.key }"
+                aria-hidden="true"
+                @mousedown.prevent.stop="startResize($event, cell.node)"
+                @click.stop
+                @dblclick.stop="resetColumnWidth(cell.node.key)"
+              ></span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- 虚拟滚动：上方占位行，保证滚动条长度与真实行数一致 -->
+          <tr v-if="topPad > 0" class="djm-table-spacer" aria-hidden="true">
+            <td :colspan="colSpan" :style="{ height: topPad + 'px' }"></td>
+          </tr>
+
+          <template v-for="item in bodyRows" :key="item.row[rowKey]">
+            <tr
+              :class="[
+                rowClassOf(item.row, item.index),
+                rowDropClassOf(item),
+                { 'djm-is-selected': isSelected(item.row), 'djm-is-row-dragging': isRowDragging(item) }
+              ]"
+              :style="virtualEnabled ? { height: effectiveRowHeight + 'px' } : null"
+              @click="$emit('row-click', item.row, item.index)"
+              @dblclick="$emit('row-dblclick', item.row, item.index)"
+              @dragover="onRowDragOver(item, $event)"
+              @dragleave="onRowDragLeave(item, $event)"
+              @drop="onRowDrop(item, $event)"
+            >
+              <!-- 拖拽手柄：只有手柄可拖，避免和选中文本、行点击冲突 -->
+              <td
+                v-if="rowDraggable"
+                :class="['djm-col-drag', prependClass('drag')]"
+                :style="prependStyle('drag')"
+              >
+                <span
+                  class="djm-row-handle"
+                  :class="{ 'djm-is-disabled': !canDragRow(item.row, item.index) }"
+                  :draggable="canDragRow(item.row, item.index) ? 'true' : 'false'"
+                  :title="canDragRow(item.row, item.index) ? '拖动排序' : '该行不可拖动'"
+                  aria-hidden="true"
+                  @dragstart.stop="onRowDragStart(item, $event)"
+                  @dragend.stop="onRowDragEnd"
+                  @click.stop
+                >
+                  <DjmIcon name="grip" :size="13" />
+                </span>
+              </td>
+              <td
+                v-if="expandable"
+                :class="['djm-col-expand', prependClass('expand')]"
+                :style="prependStyle('expand')"
+              >
+                <button
+                  v-if="canExpand(item.row)"
+                  class="djm-table-expand-btn"
+                  type="button"
+                  :aria-expanded="isExpanded(item.row)"
+                  :aria-label="isExpanded(item.row) ? '收起' : '展开'"
+                  @click.stop="toggleExpand(item.row)"
+                >
+                  <DjmIcon :name="isExpanded(item.row) ? 'chevron-down' : 'chevron-right'" :size="12" />
+                </button>
+              </td>
+              <td
+                v-if="selectable"
+                :class="['djm-col-check', prependClass('select')]"
+                :style="prependStyle('select')"
+              >
+                <input type="checkbox" :checked="isSelected(item.row)" :aria-label="selectRowLabel" @change="toggleRow(item.row)" @click.stop />
+              </td>
+              <td
+                v-if="showIndex"
+                :class="['djm-col-index', prependClass('index')]"
+                :style="prependStyle('index')"
+              >{{ indexOffset + item.index + 1 }}</td>
+              <td
+                v-for="column in visibleColumns"
+                :key="column.key"
+                :class="[column.class, column.cellClass, stickyClassOf(column)]"
+                :style="[cellStyle(column), stickyStyleOf(column)]"
+              >
+                <slot
+                  :name="'cell-' + column.key"
+                  :row="item.row"
+                  :value="item.row[column.key]"
+                  :index="item.index"
+                  :column="column"
+                >{{ item.row[column.key] }}</slot>
+              </td>
+            </tr>
+
+            <tr v-if="isExpanded(item.row)" class="djm-table-expand-row">
+              <td :colspan="colSpan">
+                <div class="djm-table-expand-body">
+                  <slot name="expand" :row="item.row" :index="item.index"></slot>
+                </div>
+              </td>
+            </tr>
+          </template>
+
+          <!-- 虚拟滚动：下方占位行 -->
+          <tr v-if="bottomPad > 0" class="djm-table-spacer" aria-hidden="true">
+            <td :colspan="colSpan" :style="{ height: bottomPad + 'px' }"></td>
+          </tr>
+
+          <tr v-if="!displayRows.length">
+            <td :colspan="colSpan">
+              <slot name="empty">
+                <DjmEmpty :icon="emptyIcon" :title="emptyLabel" :description="emptyHint" />
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div v-if="loading" class="djm-table-loading">
+        <span class="djm-spinner"></span>{{ loadingLabel }}
+      </div>
+      </div>
+    </div>
+  `
+}