@tmagic/table 1.6.1 → 1.7.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.1",
+  "version": "1.7.0-beta.0",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "vue": "^3.5.22",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.6.1",
-    "@tmagic/form": "1.6.1"
+    "@tmagic/design": "1.7.0-beta.0",
+    "@tmagic/form": "1.7.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionsColumn.vue

@@ -1,48 +1,46 @@
 <template>
-  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
-    <template v-slot="scope">
-      <TMagicTooltip
-        v-for="(action, actionIndex) in config.actions"
-        :placement="action.tooltipPlacement || 'top'"
-        :key="actionIndex"
-        :disabled="!Boolean(action.tooltip)"
-        :content="action.tooltip"
-      >
-        <TMagicButton
-          v-show="display(action.display, scope.row) && !editState[scope.$index]"
-          class="action-btn"
-          link
-          size="small"
-          :type="action.buttonType || 'primary'"
-          :icon="action.icon"
-          @click="actionHandler(action, scope.row, scope.$index)"
-          ><span v-html="formatter(action.text, scope.row)"></span
-        ></TMagicButton>
-      </TMagicTooltip>
-      <TMagicButton
-        class="action-btn"
-        v-show="editState[scope.$index]"
-        link
-        type="primary"
-        size="small"
-        @click="save(scope.$index, config)"
-        >保存</TMagicButton
-      >
-      <TMagicButton
-        class="action-btn"
-        v-show="editState[scope.$index]"
-        link
-        type="primary"
-        size="small"
-        @click="editState[scope.$index] = undefined"
-        >取消</TMagicButton
-      >
-    </template>
-  </TMagicTableColumn>
+  <TMagicTooltip
+    v-for="(action, actionIndex) in config.actions"
+    :placement="action.tooltipPlacement || 'top'"
+    :key="actionIndex"
+    :disabled="!Boolean(action.tooltip)"
+    :content="action.tooltip"
+  >
+    <TMagicButton
+      v-show="display(action.display, row) && !editState[index]"
+      class="action-btn"
+      link
+      size="small"
+      :type="action.buttonType || 'primary'"
+      :icon="action.icon"
+      :disabled="disabled(action.disabled, row)"
+      @click="actionHandler(action, row, index)"
+      ><span v-html="formatter(action.text, row)"></span
+    ></TMagicButton>
+  </TMagicTooltip>
+
+  <TMagicButton
+    class="action-btn"
+    v-show="editState[index]"
+    link
+    type="primary"
+    size="small"
+    @click="save(index, config)"
+    >保存</TMagicButton
+  >
+  <TMagicButton
+    class="action-btn"
+    v-show="editState[index]"
+    link
+    type="primary"
+    size="small"
+    @click="editState[index] = undefined"
+    >取消</TMagicButton
+  >
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
 
@@ -52,10 +50,12 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    columns: any[];
+    columns: ColumnConfig[];
     config: ColumnConfig;
     rowkeyName?: string;
     editState?: any;
+    row: any;
+    index: number;
   }>(),
   {
     columns: () => [],
@@ -71,9 +71,22 @@ const display = (fuc: boolean | Function | undefined, row: any) => {
   if (typeof fuc === 'function') {
     return fuc(row);
   }
+  if (typeof fuc === 'boolean') {
+    return fuc;
+  }
   return true;
 };
 
+const disabled = (fuc: boolean | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
+  }
+  if (typeof fuc === 'boolean') {
+    return fuc;
+  }
+  return false;
+};
+
 const formatter = (fuc: string | Function | undefined, row: any) => {
   if (typeof fuc === 'function') {
     return fuc(row);
@@ -100,7 +113,9 @@ const save = async (index: number, config: ColumnConfig) => {
   props.columns
     .filter((item) => item.type)
     .forEach((column) => {
-      data[column.prop] = row[column.prop];
+      if (column.prop) {
+        data[column.prop] = row[column.prop];
+      }
     });
 
   const res: any = await action({

package/src/ComponentColumn.vue

@@ -1,25 +1,12 @@
 <template>
-  <TMagicTableColumn
-    show-overflow-tooltip
-    :label="config.label"
-    :width="config.width"
-    :fixed="config.fixed"
-    :sortable="config.sortable"
-    :prop="config.prop"
-  >
-    <template v-slot="scope">
-      <component
-        :is="config.component"
-        v-bind="componentProps(scope.row, scope.$index)"
-        v-on="componentListeners(scope.row, scope.$index)"
-      ></component>
-    </template>
-  </TMagicTableColumn>
+  <component
+    :is="config.component"
+    v-bind="componentProps(row, index)"
+    v-on="componentListeners(row, index)"
+  ></component>
 </template>
 
 <script lang="ts" setup>
-import { TMagicTableColumn } from '@tmagic/design';
-
 import { ColumnConfig } from './schema';
 
 defineOptions({
@@ -29,6 +16,8 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     config: ColumnConfig;
+    row: any;
+    index: number;
   }>(),
   {
     config: () => ({}),

package/src/ExpandColumn.vue

@@ -1,26 +1,20 @@
 <template>
-  <!-- @ts-nocheck -->
-  <TMagicTableColumn type="expand" :width="config.width" :fixed="config.fixed">
-    <template #default="scope">
-      <MTable
-        v-if="config.table"
-        :show-header="false"
-        :columns="config.table"
-        :data="(config.prop && scope.row[config.prop]) || []"
-      ></MTable>
-      <MForm
-        v-if="config.form"
-        :config="config.form"
-        :init-values="config.values || (config.prop && scope.row[config.prop]) || {}"
-      ></MForm>
-      <div v-if="config.expandContent" v-html="config.expandContent(scope.row, config.prop)"></div>
-      <component v-if="config.component" :is="config.component" v-bind="componentProps(scope.row)"></component>
-    </template>
-  </TMagicTableColumn>
+  <MTable
+    v-if="config.table"
+    :show-header="false"
+    :columns="config.table"
+    :data="(config.prop && row[config.prop]) || []"
+  ></MTable>
+  <MForm
+    v-if="config.form"
+    :config="config.form"
+    :init-values="config.values || (config.prop && row[config.prop]) || {}"
+  ></MForm>
+  <div v-if="config.expandContent" v-html="config.expandContent(row, config.prop)"></div>
+  <component v-if="config.component" :is="config.component" v-bind="componentProps(row)"></component>
 </template>
 
 <script lang="ts" setup>
-import { TMagicTableColumn } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 
 import { ColumnConfig } from './schema';
@@ -33,6 +27,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     config: ColumnConfig;
+    row: any;
   }>(),
   {
     config: () => ({}),

package/src/PopoverColumn.vue

@@ -1,32 +1,25 @@
 <template>
-  <!-- @ts-nocheck -->
-  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
-    <template v-slot="scope">
-      <TMagicPopover
-        v-if="config.popover"
-        :placement="config.popover.placement"
-        :width="config.popover.width"
-        :trigger="config.popover.trigger"
-        :destroy-on-close="config.popover.destroyOnClose ?? true"
-      >
-        <MTable
-          v-if="config.popover.tableEmbed"
-          :show-header="config.showHeader"
-          :columns="config.table"
-          :data="(config.prop && scope.row[config.prop]) || []"
-        ></MTable>
-        <template #reference>
-          <TMagicButton link type="primary">
-            {{ config.text || formatter(config, scope.row, { index: scope.$index }) }}</TMagicButton
-          >
-        </template>
-      </TMagicPopover>
+  <TMagicPopover
+    v-if="config.popover"
+    :placement="config.popover.placement"
+    :width="config.popover.width"
+    :trigger="config.popover.trigger"
+    :destroy-on-close="config.popover.destroyOnClose ?? true"
+  >
+    <MTable
+      v-if="config.popover.tableEmbed"
+      :show-header="config.showHeader"
+      :columns="config.table"
+      :data="(config.prop && row[config.prop]) || []"
+    ></MTable>
+    <template #reference>
+      <TMagicButton link type="primary">{{ config.text || formatter(config, row, { index: index }) }}</TMagicButton>
     </template>
-  </TMagicTableColumn>
+  </TMagicPopover>
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
+import { TMagicButton, TMagicPopover } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import MTable from './Table.vue';
@@ -39,6 +32,8 @@ defineOptions({
 withDefaults(
   defineProps<{
     config: ColumnConfig;
+    row: any;
+    index: number;
   }>(),
   {
     config: () => ({}),

package/src/Table.vue

@@ -1,10 +1,11 @@
 <template>
   <TMagicTable
-    tooltip-effect="dark"
-    :tooltip-options="{ popperOptions: { strategy: 'absolute' } }"
+    v-loading="loading"
     class="m-table"
     ref="tMagicTable"
-    v-loading="loading"
+    :show-overflow-tooltip="true"
+    tooltip-effect="dark"
+    :tooltip-options="{ popperOptions: { strategy: 'absolute' } }"
     :data="tableData"
     :show-header="showHeader"
     :max-height="bodyHeight"
@@ -14,59 +15,21 @@
     :tree-props="{ children: 'children' }"
     :empty-text="emptyText || '暂无数据'"
     :span-method="objectSpanMethod"
+    :columns="tableColumns"
     @sort-change="sortChange"
     @select="selectHandler"
     @select-all="selectAllHandler"
     @selection-change="selectionChangeHandler"
     @cell-click="cellClickHandler"
     @expand-change="expandChange"
-  >
-    <template v-for="(item, columnIndex) in columns">
-      <template v-if="item.type === 'expand'">
-        <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
-      </template>
-
-      <template v-else-if="item.type === 'component'">
-        <ComponentColumn :config="item" :key="columnIndex"></ComponentColumn>
-      </template>
-
-      <template v-else-if="item.selection">
-        <component
-          width="40"
-          type="selection"
-          :is="tableColumnComponent?.component || 'el-table-column'"
-          :key="columnIndex"
-          :selectable="item.selectable"
-        ></component>
-      </template>
-
-      <template v-else-if="item.actions">
-        <ActionsColumn
-          :columns="columns"
-          :config="item"
-          :rowkey-name="rowkeyName"
-          :edit-state="editState"
-          :key="columnIndex"
-          @after-action="$emit('after-action')"
-        ></ActionsColumn>
-      </template>
-
-      <template v-else-if="item.type === 'popover'">
-        <PopoverColumn :key="columnIndex" :config="item"></PopoverColumn>
-      </template>
-
-      <template v-else>
-        <TextColumn :key="columnIndex" :config="item" :edit-state="editState"></TextColumn>
-      </template>
-    </template>
-  </TMagicTable>
+  ></TMagicTable>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, h, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { getDesignConfig, TMagicTable } from '@tmagic/design';
+import { TMagicTable } from '@tmagic/design';
 
 import ActionsColumn from './ActionsColumn.vue';
 import ComponentColumn from './ComponentColumn.vue';
@@ -117,11 +80,72 @@ const emit = defineEmits([
   'cell-click',
 ]);
 
-const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
+const cellRender = (config: ColumnConfig, { row = {}, $index }: any) => {
+  if (config.type === 'expand') {
+    return h(ExpandColumn, {
+      config,
+      row,
+    });
+  }
+  if (config.type === 'component') {
+    return h(ComponentColumn, {
+      config,
+      row,
+      index: $index,
+    });
+  }
+  if (config.actions) {
+    return h(ActionsColumn, {
+      config,
+      row,
+      index: $index,
+      rowkeyName: props.rowkeyName,
+      editState: editState.value,
+      columns: props.columns,
+    });
+  }
+  if (config.type === 'popover') {
+    return h(PopoverColumn, {
+      config,
+      row,
+      index: $index,
+    });
+  }
+  return h(TextColumn, {
+    config,
+    row,
+    index: $index,
+    editState: editState.value,
+  });
+};
+
+const tableColumns = computed(() =>
+  props.columns.map((item) => {
+    let type: 'default' | 'selection' | 'index' | 'expand' = 'default';
+    if (item.type === 'expand') {
+      type = 'expand';
+    } else if (item.selection) {
+      type = 'selection';
+    }
+
+    return {
+      props: {
+        label: item.label,
+        fixed: item.fixed,
+        width: item.width ?? (item.selection ? 40 : undefined),
+        prop: item.prop,
+        type,
+        selectable: item.selectable,
+      },
+      cell: type === 'selection' ? undefined : ({ row, $index }: any) => cellRender(item, { row, $index }),
+    };
+  }),
+);
+
+const tMagicTableRef = useTemplateRef('tMagicTable');
 
 const editState = ref([]);
 
-const tableColumnComponent = getDesignConfig('components')?.tableColumn;
 const selectionColumn = computed(() => {
   const column = props.columns.filter((item) => item.selection);
   return column.length ? column[0] : null;
@@ -171,15 +195,15 @@ const expandChange = (...args: any[]) => {
 };
 
 const toggleRowSelection = (row: any, selected: boolean) => {
-  tMagicTable.value?.toggleRowSelection(row, selected);
+  tMagicTableRef.value?.toggleRowSelection(row, selected);
 };
 
 const toggleRowExpansion = (row: any, expanded: boolean) => {
-  tMagicTable.value?.toggleRowExpansion(row, expanded);
+  tMagicTableRef.value?.toggleRowExpansion(row, expanded);
 };
 
 const clearSelection = () => {
-  tMagicTable.value?.clearSelection();
+  tMagicTableRef.value?.clearSelection();
 };
 
 const objectSpanMethod = (data: any) => {

package/src/TextColumn.vue

@@ -1,69 +1,52 @@
 <template>
-  <TMagicTableColumn
-    show-overflow-tooltip
-    :label="config.label"
-    :width="config.width"
-    :fixed="config.fixed"
-    :sortable="config.sortable"
-    :prop="config.prop"
-  >
-    <template v-slot="scope">
-      <div v-if="config.type === 'index'">
-        {{
-          config.pageIndex && config.pageSize ? config.pageIndex * config.pageSize + scope.$index + 1 : scope.$index + 1
-        }}
-      </div>
-      <TMagicForm v-else-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
-        <m-form-container
-          :prop="config.prop"
-          :rules="config.rules"
-          :config="config"
-          :name="config.prop"
-          :model="editState[scope.$index]"
-        ></m-form-container>
-      </TMagicForm>
-
-      <TMagicButton
-        v-else-if="config.action === 'actionLink' && config.prop"
-        link
-        type="primary"
-        @click="config.handler?.(scope.row)"
-      >
-        <span v-html="formatter(config, scope.row, { index: scope.$index })"></span>
-      </TMagicButton>
+  <div v-if="config.type === 'index'">
+    {{ config.pageIndex && config.pageSize ? config.pageIndex * config.pageSize + index + 1 : index + 1 }}
+  </div>
+  <TMagicForm v-else-if="config.type && editState[index]" label-width="0" :model="editState[index]">
+    <m-form-container
+      :prop="config.prop"
+      :rules="config.rules"
+      :config="config"
+      :name="config.prop"
+      :model="editState[index]"
+    ></m-form-container>
+  </TMagicForm>
 
-      <a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
-        ><img :src="scope.row[config.prop]" height="50"
-      /></a>
+  <TMagicButton
+    v-else-if="config.action === 'actionLink' && config.prop"
+    link
+    type="primary"
+    @click="config.handler?.(row)"
+  >
+    <span v-html="formatter(config, row, { index: index })"></span>
+  </TMagicButton>
 
-      <a
-        v-else-if="config.action === 'link' && config.prop"
-        target="_blank"
-        :href="scope.row[config.prop]"
-        class="keep-all"
-        >{{ scope.row[config.prop] }}</a
-      >
+  <a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="row[config.prop]"
+    ><img :src="row[config.prop]" height="50"
+  /></a>
 
-      <el-tooltip v-else-if="config.action === 'tip'" placement="left">
-        <template #content>
-          <div>{{ formatter(config, scope.row, { index: scope.$index }) }}</div>
-        </template>
-        <TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
-      </el-tooltip>
+  <a v-else-if="config.action === 'link' && config.prop" target="_blank" :href="row[config.prop]" class="keep-all">{{
+    row[config.prop]
+  }}</a>
 
-      <TMagicTag
-        v-else-if="config.action === 'tag' && config.prop"
-        :type="typeof config.type === 'function' ? config.type(scope.row[config.prop], scope.row) : config.type"
-        close-transition
-        >{{ formatter(config, scope.row, { index: scope.$index }) }}</TMagicTag
-      >
-      <div v-else v-html="formatter(config, scope.row, { index: scope.$index })"></div>
+  <el-tooltip v-else-if="config.action === 'tip'" placement="left">
+    <template #content>
+      <div>{{ formatter(config, row, { index: index }) }}</div>
     </template>
-  </TMagicTableColumn>
+    <TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
+  </el-tooltip>
+
+  <TMagicTag
+    v-else-if="config.action === 'tag' && config.prop"
+    :type="typeof config.type === 'function' ? config.type(row[config.prop], row) : config.type"
+    close-transition
+    >{{ formatter(config, row, { index: index }) }}</TMagicTag
+  >
+  <div v-else v-html="formatter(config, row, { index: index })"></div>
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
+import { TMagicButton, TMagicForm, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
@@ -76,6 +59,8 @@ withDefaults(
   defineProps<{
     config: ColumnConfig;
     editState?: any;
+    row: any;
+    index: number;
   }>(),
   {
     config: () => ({}),

package/src/schema.ts

@@ -21,7 +21,8 @@ import { FormConfig, FormValue } from '@tmagic/form';
 export interface ColumnActionConfig {
   type?: 'delete' | 'copy' | 'edit' | string;
   buttonType?: string;
-  display?: (row: any) => boolean;
+  display?: boolean | ((row: any) => boolean);
+  disabled?: boolean | ((row: any) => boolean);
   text?: string | ((row: any) => string);
   name?: string;
   tooltip?: string;

package/types/index.d.ts

@@ -5,7 +5,8 @@ import { FormConfig, FormValue } from '@tmagic/form';
 interface ColumnActionConfig {
     type?: 'delete' | 'copy' | 'edit' | string;
     buttonType?: string;
-    display?: (row: any) => boolean;
+    display?: boolean | ((row: any) => boolean);
+    disabled?: boolean | ((row: any) => boolean);
     text?: string | ((row: any) => string);
     name?: string;
     tooltip?: string;
@@ -106,9 +107,9 @@ declare const __VLS_export: _vue_runtime_core.DefineComponent<__VLS_Props, {
     "onSelection-change"?: ((...args: any[]) => any) | undefined;
 }>, {
     loading: boolean;
+    columns: ColumnConfig[];
     border: boolean;
     defaultExpandAll: boolean;
-    columns: ColumnConfig[];
     showHeader: boolean;
 }, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, false, {}, any>;
 declare const _default$1: typeof __VLS_export;