vue3-smart-table 1.0.4 → 1.0.6

package/src/components/SmartTable/renderers/index.ts

@@ -164,6 +164,7 @@ const img = createFunctionalRenderer((props) => {
     return h(ElImage, {
       src: imageList[0],
       previewSrcList: rp.previewSrcList || imageList,
+      previewTeleported: true, 
       fit: rp.fit || 'contain',
       style: defaultStyle,
       ...rp
@@ -179,6 +180,7 @@ const img = createFunctionalRenderer((props) => {
       h(ElImage, {
         src: imageList[0],
         previewSrcList: rp.previewSrcList || imageList,
+        previewTeleported: true, 
         fit: rp.fit || 'contain',
         style: defaultStyle,
         ...rp
@@ -241,10 +243,11 @@ export function isDataColumn(
 }
 
 const formatter = createFunctionalRenderer((props) => {
-  const { col, row } = props
+  const { col, row, index } = props
   const val = getValueByPath(props.row, props.col.key) ?? ''
   if (isDataColumn(col)) {
-    return col.formatter?.(val, row)
+    // formatter 函数签名: (value, row, index) => string
+    return col.formatter?.(val, row, index)
   }
   return val ?? ''
 })
@@ -261,6 +264,7 @@ const icon = createFunctionalRenderer((props) => {
     return h(ElImage, {
       src: val,
       previewSrcList: [val],
+      previewTeleported: true, 
       fit: 'contain',
       style: 'width:40px;height:40px',
       ...rp

package/src/components/SmartTable/renderers/input.vue

@@ -15,6 +15,7 @@ import { getValueByPath, setValueByPath } from '../utils/path'
 interface Props {
   readonly row: any
   readonly col: ColumnConfig
+  readonly index: number
   onCellBlur?: (row: any, col: ColumnConfig) => void
   onCellEnter?: (row: any, col: ColumnConfig) => void
 }

package/src/components/SmartTable/renderers/inputNumber.vue

@@ -15,6 +15,7 @@ import { getValueByPath, setValueByPath } from '../utils/path'
 interface Props {
   readonly row: any
   readonly col: ColumnConfig
+  readonly index: number
   onCellChange?: (row: any, col: ColumnConfig) => void
   onCellBlur?: (row: any, col: ColumnConfig) => void
   onCellEnter?: (row: any, col: ColumnConfig) => void

package/src/components/SmartTable/renderers/select.vue

@@ -23,6 +23,7 @@ import { getValueByPath, setValueByPath } from '../utils/path'
 interface Props {
   readonly row: any
   readonly col: ColumnConfig
+  readonly index: number
   onCellChange?: (row: any, col: ColumnConfig) => void
   onCellBlur?: (row: any, col: ColumnConfig) => void
   onCellEnter?: (row: any, col: ColumnConfig) => void

package/src/components/SmartTable/types.ts

@@ -223,7 +223,17 @@ export interface BaseColumn<R extends DefaultRow> {
 export interface SelectionColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'selection' }
 export interface IndexColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'index' }
 export interface OperationColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'operation'; buttons: ButtonConfig<R>[] }
-export interface DataColumn<R extends DefaultRow> extends BaseColumn<R> { type?: 'default'; formatter?: (value: any, row: R) => any }
+export interface DataColumn<R extends DefaultRow> extends BaseColumn<R> {
+  type?: 'default'
+  /**
+   * 格式化函数
+   * @param value 单元格值
+   * @param row 当前行数据
+   * @param index 当前行索引（从0开始）
+   * @returns 格式化后的显示内容
+   */
+  formatter?: (value: any, row: R, index: number) => any
+}
 
 export type ColumnConfig<R extends DefaultRow = any> =
   | SelectionColumn<R>

package/src/components/SmartTable/column/index.vue

@@ -1,170 +0,0 @@
-<template>
-  <!-- ========== selection 列 ========== -->
-  <el-table-column
-    v-if="col.type === 'selection'"
-    type="selection"
-    v-bind="col.columnProps"
-  />
-
-  <!-- ========== index 列 ========== -->
-  <el-table-column
-    v-else-if="col.type === 'index'"
-    type="index"
-    :label="col.label || '#'"
-    align="center"
-    v-bind="col.columnProps"
-  >
-    <template #default="{ $index }">
-      {{ computeIndex($index) }}
-    </template>
-  </el-table-column>
-
-  <!-- ========== operation 列 ========== -->
-  <el-table-column
-    v-else-if="col.type === 'operation' && showOperationColumn"
-    :label="col.label || '操作'"
-    align="center"
-    v-bind="{
-      ...col.columnProps,
-      width: operationWidth
-    }"
-  >
-    <template #default="{ row }">
-      <el-button
-        v-for="btn in getVisibleButtons(row)"
-        :key="btn.label"
-        :type="btn.type || 'primary'"
-        link
-        @click="btn.action(row)"
-      >
-        {{ btn.label }}
-      </el-button>
-    </template>
-  </el-table-column>
-
-  <!-- ========== 普通列 / renderer / editable ========== -->
-  <el-table-column
-    v-else-if="isDataOrOperationColumn(col)"
-    :label="col.label"
-    align="center"
-    v-bind="col.columnProps || {}"
-    >
-    
-    <template #default="scope">
-      <!-- 父组件插槽优先 -->
-      <template v-if="col.render === 'slot' && $slots[col?.slot || col.key]">
-        <slot :name="col?.slot || col.key" v-bind="scope" />
-      </template>
-
-      <!-- renderer -->
-      <component
-        v-else-if="col.render && renderer[col.render]"
-        :is="renderer[col.render]"
-        :row="scope.row"
-        :col="col"
-        :onCellChange="handleCellChange"
-        :onCellBlur="handleCellBlur"
-        :onCellEnter="handleCellEnter"
-        :onClick="handleCellClick"
-      />
-      <!-- 默认文本 -->
-      <span v-else
-        :style="col.renderProps?.style || ''"
-        :class="col.renderProps?.class || ''"
-        :title="getValueByPath(scope.row, col.key)">
-        {{ getValueByPath(scope.row, col.key) }}
-      </span>
-    </template>
-  </el-table-column>
-  
-</template>
-
-<script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
-import type { ColumnConfig } from '../types'
-import { getRendererManager } from '../renderer'
-import { registerBuiltInRenderers } from '../renderers'
-import { useOperationColumn } from '../hooks/useOperationColumn'
-import { getValueByPath } from '../utils/path'
-
-const props = defineProps({
-  col: { type: Object as PropType<ColumnConfig>, required: true },
-  permissions: { type: Array as PropType<string[]>, default: () => [] },
-  pagination: { type: Object, default: () => ({}) },
-})
-
-const emit = defineEmits(['cellBlur', 'cellEnter', 'cellChange', 'cellClick'])
-
-const computeIndex = (index: number) => {
-  const page = props.pagination?.page
-  const size = props.pagination?.size
-  return page && size ? (page - 1) * size + index + 1 : index + 1
-}
-
-/** 解构 col 响应式引用 */
-const { col } = toRefs(props)
-
-/** ========== 事件统一上抛 ========== */
-const handleCellChange = (row: any, key: string) => emit('cellChange', row, key)
-const handleCellBlur = (row: any, key: string) =>  emit('cellBlur', row, key)
-const handleCellEnter = (row: any, key: string) => emit('cellEnter', row, key)
-const handleCellClick = (row: any, col: any) => emit('cellClick', row, col)
-
-/** ========== renderer 注册 ========== */
-// 注册内置渲染器（重复调用会自动跳过已存在的）
-registerBuiltInRenderers(getRendererManager())
-
-// 获取所有渲染器（内置 + 自定义）
-const renderer = computed(() => {
-  const manager = getRendererManager()
-  const allRenderers: Record<string, any> = {}
-
-  // 合并内置渲染器和自定义渲染器
-  manager.names().forEach((name: string) => {
-    const r = manager.get(name)
-    if (r) allRenderers[name] = r
-  })
-
-  return allRenderers
-})
-
-/** ========== operation 列逻辑 ========== */
-const {
-  hasAnyButton,
-  hasAnyVisibleButton,
-  optWidth,
-  getMaxOptWidth,
-  getVisibleButtons
-} = useOperationColumn(
-  col.value.buttons || [],
-  col.value.maxbtn ?? 10,
-  props.permissions || []
-)
-
-/** 是否显示操作列 */
-const showOperationColumn = computed(() => {
-  const buttons = col.value.buttons || []
-  if (!buttons.length) return false  // 没有配置按钮直接隐藏
-  const rows = col.value.__rows || []
-  // 无行数据时，至少有一个按钮有权限就显示
-  if (!rows.length) return hasAnyButton.value
-  // 有行数据时，至少一行有可见按钮才显示
-  return hasAnyVisibleButton(col.value.__rows || [])
-})
-
-/** 操作列宽度 */
-const operationWidth = computed(() => {
-  // 无行数据，用静态宽度
-  if (!col.value.__rows) return optWidth.value
-  // 有行数据，取最大宽度
-  return getMaxOptWidth(col.value.__rows)
-})
-
-function isDataOrOperationColumn(c: ColumnConfig) {
-  if (c.type === 'selection' || c.type === 'index') return false
-  if (c.type === 'operation' && !showOperationColumn.value) return false
-  if (c.visible === false) return false
-  return true
-}
-</script>