@ebiz/designer-components 0.1.0 → 0.1.2

package/src/components/EbizTable.vue

@@ -1,470 +1,470 @@
-<template>
-  <div>
-    <t-table ref="tableRef" :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
-      :horizontal-align="horizontalAlign" :size="size" :bordered="bordered" :stripe="stripe" :hover="hover"
-      :height="height" :max-height="maxHeight" :loading="loading" :loading-props="loadingProps" :load-more="loadMore"
-      :empty="empty" :table-layout="tableLayout" :cell-empty-content="cellEmptyContent" :pagination="pagination"
-      :show-header="showHeader" :header-affixed-top="headerAffixedTop" :footer-affixed-bottom="footerAffixedBottom"
-      :top-content="topContent" :bottom-content="bottomContent" :sort="sort" :filter-value="filterValue"
-      :filter-icon="filterIcon" :tree="tree" :resizable="resizable" :column-controller="columnController"
-      :column-controller-visible="columnControllerVisible" :expandable="expandable" :disabled-sort="disabledSort"
-      :virtual-scroll="virtualScroll" :indent="indent" :row-attributes="rowAttributes" :scroll="scroll"
-      :show-sort-column-bg="showSortColumnBg" :allow-sort-by-click-header="allowSortByClickHeader" :dragSort="dragSort"
-      :select-on-row-click="selectOnRowClick" :merge-cells="mergeCells" :value="value" :row-className="rowClassName"
-      :fixed-rows="fixedRows" :highlight-current-row="highlightCurrentRow" :ellipsis-title="ellipsisTitle"
-      @page-change="handlePageChange" @sort-change="handleSortChange" @filter-change="handleFilterChange"
-      @select-change="handleSelectChange" @expanded-change="handleExpandedChange" @cell-click="handleCellClick"
-      @row-click="handleRowClick" @row-hover="handleRowHover" @row-dblclick="handleRowDblclick" @scroll="handleScroll"
-      @column-change="handleColumnChange" @expand-all="handleExpandAll" @tree-expand-change="handleTreeExpandChange"
-      @display-columns-change="handleDisplayColumnsChange"
-      @column-controller-visible-change="handleColumnControllerVisibleChange" @drag-sort="handleDragSort"
-      @validate="handleValidate">
-
-
-
-      <!-- 顶部内容插槽 -->
-      <template v-if="$slots.topContent" #topContent>
-        <slot name="topContent"></slot>
-      </template>
-
-      <!-- 底部内容插槽 -->
-      <template v-if="$slots.bottomContent" #bottomContent>
-        <slot name="bottomContent"></slot>
-      </template>
-
-      <!-- 空状态插槽 -->
-      <template v-if="$slots.empty" #empty>
-        <slot name="empty"></slot>
-      </template>
-
-      <!-- 加载更多插槽 -->
-      <template v-if="$slots.loadMore" #loadMore>
-        <slot name="loadMore"></slot>
-      </template>
-
-      <!-- 表头插槽 -->
-      <template v-if="$slots.header" #header>
-        <slot name="header"></slot>
-      </template>
-
-      <!-- 表尾插槽 -->
-      <template v-if="$slots.footer" #footer>
-        <slot name="footer"></slot>
-      </template>
-
-      <!-- 自定义单元格插槽 -->
-      <template v-for="column in dynamicColumns" :key="column.colKey" v-if="column.cell" #[column.cell]="cellProps">
-        <slot :name="`cell-${column.colKey}`" v-bind="cellProps"></slot>
-      </template>
-      <template v-for="column in dynamicColumns" :key="column.colKey" v-if="column.title" #[column.title]="titleProps">
-        <slot :name="`title-${column.colKey}`" v-bind="titleProps"></slot>
-      </template>
-
-      <!-- 展开行插槽 -->
-      <template v-if="$slots.expandedRow" #expandedRow="slotProps">
-        <slot name="expandedRow" v-bind="slotProps"></slot>
-      </template>
-
-      <!-- 过滤图标插槽 -->
-      <template v-if="$slots.filterIcon" #filterIcon="slotProps">
-        <slot name="filterIcon" v-bind="slotProps"></slot>
-      </template>
-
-      <!-- 自定义列配置按钮插槽 -->
-      <template v-if="$slots.columnController" #columnController="slotProps">
-        <slot name="columnController" v-bind="slotProps"></slot>
-      </template>
-
-      <!-- 自定义分页器插槽 -->
-      <template v-if="$slots.pagination" #pagination="slotProps">
-        <slot name="pagination" v-bind="slotProps"></slot>
-      </template>
-
-      <!-- 默认插槽 -->
-      <slot></slot>
-    </t-table>
-  </div>
-
-</template>
-
-<script>
-export default {
-  name: "EbizTable"
-}
-</script>
-
-<script setup>
-import { ref, computed, onMounted, watch, provide } from 'vue';
-import { Table } from 'tdesign-vue-next';
-
-const props = defineProps({
-  // 表格数据
-  data: {
-    type: Array,
-    default: () => []
-  },
-  // 表格列配置
-  columns: {
-    type: Array,
-    default: () => []
-  },
-  // 唯一标识字段
-  rowKey: {
-    type: String,
-    default: 'id'
-  },
-  // 垂直对齐方式
-  verticalAlign: {
-    type: String,
-    default: 'middle',
-    validator: (val) => ['top', 'middle', 'bottom'].includes(val)
-  },
-  // 水平对齐方式
-  horizontalAlign: {
-    type: String,
-    default: 'left',
-    validator: (val) => ['left', 'center', 'right'].includes(val)
-  },
-  // 表格尺寸
-  size: {
-    type: String,
-    default: 'medium',
-    validator: (val) => ['small', 'medium', 'large'].includes(val)
-  },
-  // 是否显示表格边框
-  bordered: {
-    type: Boolean,
-    default: false
-  },
-  // 是否显示斑马纹
-  stripe: {
-    type: Boolean,
-    default: false
-  },
-  // 是否开启悬停效果
-  hover: {
-    type: Boolean,
-    default: true
-  },
-  // 表格高度
-  height: {
-    type: [String, Number],
-    default: undefined
-  },
-  // 表格最大高度
-  maxHeight: {
-    type: [String, Number],
-    default: undefined
-  },
-  // 是否处于加载状态
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  // 加载状态配置
-  loadingProps: {
-    type: Object,
-    default: () => ({})
-  },
-  // 加载更多配置
-  loadMore: {
-    type: [String, Function],
-    default: undefined
-  },
-  // 空数据呈现配置
-  empty: {
-    type: [String, Function],
-    default: undefined
-  },
-  // 表格布局方式
-  tableLayout: {
-    type: String,
-    default: 'fixed',
-    validator: (val) => ['auto', 'fixed'].includes(val)
-  },
-  // 单元格空内容处理
-  cellEmptyContent: {
-    type: [String, Function],
-    default: undefined
-  },
-  // 分页配置
-  pagination: {
-    type: Object,
-    default: undefined
-  },
-  // 是否显示表头
-  showHeader: {
-    type: Boolean,
-    default: true
-  },
-  // 表头吸顶设置
-  headerAffixedTop: {
-    type: [Boolean, Object],
-    default: false
-  },
-  // 表尾吸底设置
-  footerAffixedBottom: {
-    type: [Boolean, Object],
-    default: false
-  },
-  // 表格顶部内容
-  topContent: {
-    type: [String, Function],
-    default: undefined
-  },
-  // 表格底部内容
-  bottomContent: {
-    type: [String, Function],
-    default: undefined
-  },
-  // 排序配置
-  sort: {
-    type: [Object, Array],
-    default: undefined
-  },
-  // 过滤值
-  filterValue: {
-    type: Object,
-    default: undefined
-  },
-  // 过滤图标
-  filterIcon: {
-    type: Function,
-    default: undefined
-  },
-  // 树形结构配置
-  tree: {
-    type: Object,
-    default: undefined
-  },
-  // 是否允许调整列宽
-  resizable: {
-    type: Boolean,
-    default: false
-  },
-  // 列配置器
-  columnController: {
-    type: Boolean,
-    default: false
-  },
-  // 列配置器是否显示
-  columnControllerVisible: {
-    type: Boolean,
-    default: undefined
-  },
-  // 展开行配置
-  expandable: {
-    type: Object,
-    default: undefined
-  },
-  // 禁用排序
-  disabledSort: {
-    type: Boolean,
-    default: false
-  },
-  // 虚拟滚动配置
-  virtualScroll: {
-    type: [Boolean, Object],
-    default: false
-  },
-  // 树形结构缩进
-  indent: {
-    type: Number,
-    default: 24
-  },
-  // 行属性配置
-  rowAttributes: {
-    type: [Object, Function],
-    default: undefined
-  },
-  // 滚动配置
-  scroll: {
-    type: Object,
-    default: undefined
-  },
-  // 是否显示排序列背景色
-  showSortColumnBg: {
-    type: Boolean,
-    default: false
-  },
-  // 是否允许点击表头排序
-  allowSortByClickHeader: {
-    type: Boolean,
-    default: true
-  },
-  // 拖拽排序配置
-  dragSort: {
-    type: String,
-    default: '',
-    validator: (val) => ['', 'row', 'col', 'row-handler', 'row-handler-col'].includes(val)
-  },
-  // 点击行是否选中
-  selectOnRowClick: {
-    type: Boolean,
-    default: false
-  },
-  // 合并单元格配置
-  mergeCells: {
-    type: Array,
-    default: undefined
-  },
-  // 选中值（多选表格）
-  value: {
-    type: Array,
-    default: undefined
-  },
-  // 行类名配置
-  rowClassName: {
-    type: [String, Function],
-    default: undefined
-  },
-  // 固定行配置
-  fixedRows: {
-    type: Array,
-    default: undefined
-  },
-  // 是否高亮当前行
-  highlightCurrentRow: {
-    type: Boolean,
-    default: false
-  },
-  // 表头文字超出是否显示省略号
-  ellipsisTitle: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits([
-  'page-change',
-  'sort-change',
-  'filter-change',
-  'select-change',
-  'expanded-change',
-  'cell-click',
-  'row-click',
-  'row-hover',
-  'row-dblclick',
-  'scroll',
-  'column-change',
-  'expand-all',
-  'tree-expand-change',
-  'display-columns-change',
-  'column-controller-visible-change',
-  'drag-sort',
-  'validate'
-]);
-
-// 动态列配置（由EbizTableColumn子组件注册）
-const dynamicColumns = ref([]);
-
-// 合并props中的columns和动态注册的columns
-const mergedColumns = computed(() => {
-  return [...props.columns, ...dynamicColumns.value];
-});
-
-// 提供注册列的方法给子组件
-const registerColumn = (column) => {
-  if (!dynamicColumns.value.some(item => item.colKey === column.colKey)) {
-    dynamicColumns.value.push(column);
-  }
-};
-
-// 提供表格上下文给子组件
-provide('tableCtx', {
-  registerColumn
-});
-
-// 分页变化
-const handlePageChange = (pageInfo) => {
-  emit('page-change', pageInfo);
-};
-
-// 排序变化
-const handleSortChange = (sort, options) => {
-  emit('sort-change', sort, options);
-};
-
-// 过滤变化
-const handleFilterChange = (filterValue, col) => {
-  emit('filter-change', filterValue, col);
-};
-
-// 选择变化
-const handleSelectChange = (selectedRowData, options) => {
-  emit('select-change', selectedRowData, options);
-};
-
-// 展开行变化
-const handleExpandedChange = (expandedRowData, options) => {
-  emit('expanded-change', expandedRowData, options);
-};
-
-// 单元格点击
-const handleCellClick = (context) => {
-  emit('cell-click', context);
-};
-
-// 行点击
-const handleRowClick = (rowData, rowIndex, row) => {
-  emit('row-click', rowData, rowIndex, row);
-};
-
-// 行悬停
-const handleRowHover = (rowData, rowIndex, row) => {
-  emit('row-hover', rowData, rowIndex, row);
-};
-
-// 行双击
-const handleRowDblclick = (rowData, rowIndex, row) => {
-  emit('row-dblclick', rowData, rowIndex, row);
-};
-
-// 表格滚动
-const handleScroll = (params) => {
-  emit('scroll', params);
-};
-
-// 列变化
-const handleColumnChange = (params) => {
-  emit('column-change', params);
-};
-
-// 全部展开变化
-const handleExpandAll = (expandAll, options) => {
-  emit('expand-all', expandAll, options);
-};
-
-// 树形展开变化
-const handleTreeExpandChange = (rowData, options) => {
-  emit('tree-expand-change', rowData, options);
-};
-
-// 显示列变化
-const handleDisplayColumnsChange = (columns) => {
-  emit('display-columns-change', columns);
-};
-
-// 列控制器显示状态变化
-const handleColumnControllerVisibleChange = (visible) => {
-  emit('column-controller-visible-change', visible);
-};
-
-// 拖拽排序变化
-const handleDragSort = (params) => {
-  emit('drag-sort', params);
-};
-
-// 校验
-const handleValidate = (context) => {
-  emit('validate', context);
-};
-const tableRef = ref();
-defineExpose({
-  tableRef
-})
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+  <div>
+    <t-table ref="tableRef" :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
+      :horizontal-align="horizontalAlign" :size="size" :bordered="bordered" :stripe="stripe" :hover="hover"
+      :height="height" :max-height="maxHeight" :loading="loading" :loading-props="loadingProps" :load-more="loadMore"
+      :empty="empty" :table-layout="tableLayout" :cell-empty-content="cellEmptyContent" :pagination="pagination"
+      :show-header="showHeader" :header-affixed-top="headerAffixedTop" :footer-affixed-bottom="footerAffixedBottom"
+      :top-content="topContent" :bottom-content="bottomContent" :sort="sort" :filter-value="filterValue"
+      :filter-icon="filterIcon" :tree="tree" :resizable="resizable" :column-controller="columnController"
+      :column-controller-visible="columnControllerVisible" :expandable="expandable" :disabled-sort="disabledSort"
+      :virtual-scroll="virtualScroll" :indent="indent" :row-attributes="rowAttributes" :scroll="scroll"
+      :show-sort-column-bg="showSortColumnBg" :allow-sort-by-click-header="allowSortByClickHeader" :dragSort="dragSort"
+      :select-on-row-click="selectOnRowClick" :merge-cells="mergeCells" :value="value" :row-className="rowClassName"
+      :fixed-rows="fixedRows" :highlight-current-row="highlightCurrentRow" :ellipsis-title="ellipsisTitle"
+      @page-change="handlePageChange" @sort-change="handleSortChange" @filter-change="handleFilterChange"
+      @select-change="handleSelectChange" @expanded-change="handleExpandedChange" @cell-click="handleCellClick"
+      @row-click="handleRowClick" @row-hover="handleRowHover" @row-dblclick="handleRowDblclick" @scroll="handleScroll"
+      @column-change="handleColumnChange" @expand-all="handleExpandAll" @tree-expand-change="handleTreeExpandChange"
+      @display-columns-change="handleDisplayColumnsChange"
+      @column-controller-visible-change="handleColumnControllerVisibleChange" @drag-sort="handleDragSort"
+      @validate="handleValidate">
+
+
+
+      <!-- 顶部内容插槽 -->
+      <template v-if="$slots.topContent" #topContent>
+        <slot name="topContent"></slot>
+      </template>
+
+      <!-- 底部内容插槽 -->
+      <template v-if="$slots.bottomContent" #bottomContent>
+        <slot name="bottomContent"></slot>
+      </template>
+
+      <!-- 空状态插槽 -->
+      <template v-if="$slots.empty" #empty>
+        <slot name="empty"></slot>
+      </template>
+
+      <!-- 加载更多插槽 -->
+      <template v-if="$slots.loadMore" #loadMore>
+        <slot name="loadMore"></slot>
+      </template>
+
+      <!-- 表头插槽 -->
+      <template v-if="$slots.header" #header>
+        <slot name="header"></slot>
+      </template>
+
+      <!-- 表尾插槽 -->
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer"></slot>
+      </template>
+
+      <!-- 自定义单元格插槽 -->
+      <template v-for="column in dynamicColumns" :key="column.colKey" v-if="column.cell" #[column.cell]="cellProps">
+        <slot :name="`cell-${column.colKey}`" v-bind="cellProps"></slot>
+      </template>
+      <template v-for="column in dynamicColumns" :key="column.colKey" v-if="column.title" #[column.title]="titleProps">
+        <slot :name="`title-${column.colKey}`" v-bind="titleProps"></slot>
+      </template>
+
+      <!-- 展开行插槽 -->
+      <template v-if="$slots.expandedRow" #expandedRow="slotProps">
+        <slot name="expandedRow" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 过滤图标插槽 -->
+      <template v-if="$slots.filterIcon" #filterIcon="slotProps">
+        <slot name="filterIcon" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 自定义列配置按钮插槽 -->
+      <template v-if="$slots.columnController" #columnController="slotProps">
+        <slot name="columnController" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 自定义分页器插槽 -->
+      <template v-if="$slots.pagination" #pagination="slotProps">
+        <slot name="pagination" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 默认插槽 -->
+      <slot></slot>
+    </t-table>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "EbizTable"
+}
+</script>
+
+<script setup>
+import { ref, computed, onMounted, watch, provide } from 'vue';
+import { Table } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 表格数据
+  data: {
+    type: Array,
+    default: () => []
+  },
+  // 表格列配置
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  // 唯一标识字段
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+  // 垂直对齐方式
+  verticalAlign: {
+    type: String,
+    default: 'middle',
+    validator: (val) => ['top', 'middle', 'bottom'].includes(val)
+  },
+  // 水平对齐方式
+  horizontalAlign: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'center', 'right'].includes(val)
+  },
+  // 表格尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val)
+  },
+  // 是否显示表格边框
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示斑马纹
+  stripe: {
+    type: Boolean,
+    default: false
+  },
+  // 是否开启悬停效果
+  hover: {
+    type: Boolean,
+    default: true
+  },
+  // 表格高度
+  height: {
+    type: [String, Number],
+    default: undefined
+  },
+  // 表格最大高度
+  maxHeight: {
+    type: [String, Number],
+    default: undefined
+  },
+  // 是否处于加载状态
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 加载状态配置
+  loadingProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 加载更多配置
+  loadMore: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 空数据呈现配置
+  empty: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 表格布局方式
+  tableLayout: {
+    type: String,
+    default: 'fixed',
+    validator: (val) => ['auto', 'fixed'].includes(val)
+  },
+  // 单元格空内容处理
+  cellEmptyContent: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 分页配置
+  pagination: {
+    type: Object,
+    default: undefined
+  },
+  // 是否显示表头
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  // 表头吸顶设置
+  headerAffixedTop: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 表尾吸底设置
+  footerAffixedBottom: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 表格顶部内容
+  topContent: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 表格底部内容
+  bottomContent: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 排序配置
+  sort: {
+    type: [Object, Array],
+    default: undefined
+  },
+  // 过滤值
+  filterValue: {
+    type: Object,
+    default: undefined
+  },
+  // 过滤图标
+  filterIcon: {
+    type: Function,
+    default: undefined
+  },
+  // 树形结构配置
+  tree: {
+    type: Object,
+    default: undefined
+  },
+  // 是否允许调整列宽
+  resizable: {
+    type: Boolean,
+    default: false
+  },
+  // 列配置器
+  columnController: {
+    type: Boolean,
+    default: false
+  },
+  // 列配置器是否显示
+  columnControllerVisible: {
+    type: Boolean,
+    default: undefined
+  },
+  // 展开行配置
+  expandable: {
+    type: Object,
+    default: undefined
+  },
+  // 禁用排序
+  disabledSort: {
+    type: Boolean,
+    default: false
+  },
+  // 虚拟滚动配置
+  virtualScroll: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 树形结构缩进
+  indent: {
+    type: Number,
+    default: 24
+  },
+  // 行属性配置
+  rowAttributes: {
+    type: [Object, Function],
+    default: undefined
+  },
+  // 滚动配置
+  scroll: {
+    type: Object,
+    default: undefined
+  },
+  // 是否显示排序列背景色
+  showSortColumnBg: {
+    type: Boolean,
+    default: false
+  },
+  // 是否允许点击表头排序
+  allowSortByClickHeader: {
+    type: Boolean,
+    default: true
+  },
+  // 拖拽排序配置
+  dragSort: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'row', 'col', 'row-handler', 'row-handler-col'].includes(val)
+  },
+  // 点击行是否选中
+  selectOnRowClick: {
+    type: Boolean,
+    default: false
+  },
+  // 合并单元格配置
+  mergeCells: {
+    type: Array,
+    default: undefined
+  },
+  // 选中值（多选表格）
+  value: {
+    type: Array,
+    default: undefined
+  },
+  // 行类名配置
+  rowClassName: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 固定行配置
+  fixedRows: {
+    type: Array,
+    default: undefined
+  },
+  // 是否高亮当前行
+  highlightCurrentRow: {
+    type: Boolean,
+    default: false
+  },
+  // 表头文字超出是否显示省略号
+  ellipsisTitle: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits([
+  'page-change',
+  'sort-change',
+  'filter-change',
+  'select-change',
+  'expanded-change',
+  'cell-click',
+  'row-click',
+  'row-hover',
+  'row-dblclick',
+  'scroll',
+  'column-change',
+  'expand-all',
+  'tree-expand-change',
+  'display-columns-change',
+  'column-controller-visible-change',
+  'drag-sort',
+  'validate'
+]);
+
+// 动态列配置（由EbizTableColumn子组件注册）
+const dynamicColumns = ref([]);
+
+// 合并props中的columns和动态注册的columns
+const mergedColumns = computed(() => {
+  return [...props.columns, ...dynamicColumns.value];
+});
+
+// 提供注册列的方法给子组件
+const registerColumn = (column) => {
+  if (!dynamicColumns.value.some(item => item.colKey === column.colKey)) {
+    dynamicColumns.value.push(column);
+  }
+};
+
+// 提供表格上下文给子组件
+provide('tableCtx', {
+  registerColumn
+});
+
+// 分页变化
+const handlePageChange = (pageInfo) => {
+  emit('page-change', pageInfo);
+};
+
+// 排序变化
+const handleSortChange = (sort, options) => {
+  emit('sort-change', sort, options);
+};
+
+// 过滤变化
+const handleFilterChange = (filterValue, col) => {
+  emit('filter-change', filterValue, col);
+};
+
+// 选择变化
+const handleSelectChange = (selectedRowData, options) => {
+  emit('select-change', selectedRowData, options);
+};
+
+// 展开行变化
+const handleExpandedChange = (expandedRowData, options) => {
+  emit('expanded-change', expandedRowData, options);
+};
+
+// 单元格点击
+const handleCellClick = (context) => {
+  emit('cell-click', context);
+};
+
+// 行点击
+const handleRowClick = (rowData, rowIndex, row) => {
+  emit('row-click', rowData, rowIndex, row);
+};
+
+// 行悬停
+const handleRowHover = (rowData, rowIndex, row) => {
+  emit('row-hover', rowData, rowIndex, row);
+};
+
+// 行双击
+const handleRowDblclick = (rowData, rowIndex, row) => {
+  emit('row-dblclick', rowData, rowIndex, row);
+};
+
+// 表格滚动
+const handleScroll = (params) => {
+  emit('scroll', params);
+};
+
+// 列变化
+const handleColumnChange = (params) => {
+  emit('column-change', params);
+};
+
+// 全部展开变化
+const handleExpandAll = (expandAll, options) => {
+  emit('expand-all', expandAll, options);
+};
+
+// 树形展开变化
+const handleTreeExpandChange = (rowData, options) => {
+  emit('tree-expand-change', rowData, options);
+};
+
+// 显示列变化
+const handleDisplayColumnsChange = (columns) => {
+  emit('display-columns-change', columns);
+};
+
+// 列控制器显示状态变化
+const handleColumnControllerVisibleChange = (visible) => {
+  emit('column-controller-visible-change', visible);
+};
+
+// 拖拽排序变化
+const handleDragSort = (params) => {
+  emit('drag-sort', params);
+};
+
+// 校验
+const handleValidate = (context) => {
+  emit('validate', context);
+};
+const tableRef = ref();
+defineExpose({
+  tableRef
+})
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>