@tmagic/table 1.2.0-beta.2 → 1.2.0-beta.20

package/src/Table.vue

@@ -1,15 +1,15 @@
 <template>
-  <el-table
+  <TMagicTable
     tooltip-effect="dark"
     class="m-table"
-    ref="table"
+    ref="tMagicTable"
     v-loading="loading"
     :data="tableData"
     :show-header="showHeader"
     :max-height="bodyHeight"
     :default-expand-all="defaultExpandAll"
     :border="hasBorder"
-    :row-key="rowkeyName || 'c_id'"
+    :row-key="rowkeyName || 'id'"
     :tree-props="{ children: 'children' }"
     :empty-text="emptyText || '暂无数据'"
     :span-method="objectSpanMethod"
@@ -17,190 +17,174 @@
     @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'">
-        <expand-column :config="item" :key="columnIndex"></expand-column>
+        <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
       </template>
 
       <template v-else-if="item.selection">
-        <el-table-column type="selection" :key="columnIndex" width="40" :selectable="item.selectable"></el-table-column>
+        <component
+          width="40"
+          type="selection"
+          :is="tableColumnComponent.component"
+          :key="columnIndex"
+          :selectable="item.selectable"
+        ></component>
       </template>
 
       <template v-else-if="item.actions">
-        <actions-column
+        <ActionsColumn
           :columns="columns"
           :config="item"
           :rowkey-name="rowkeyName"
           :edit-state="editState"
           :key="columnIndex"
-          @afterAction="$emit('afterAction')"
-        ></actions-column>
+          @after-action="$emit('after-action')"
+        ></ActionsColumn>
       </template>
 
       <template v-else-if="item.type === 'popover'">
-        <popover-column :key="columnIndex" :config="item"></popover-column>
+        <PopoverColumn :key="columnIndex" :config="item"></PopoverColumn>
       </template>
 
       <template v-else>
-        <text-column :key="columnIndex" :config="item" :edit-state="editState"></text-column>
+        <TextColumn :key="columnIndex" :config="item" :edit-state="editState"></TextColumn>
       </template>
     </template>
-  </el-table>
+  </TMagicTable>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { ElTable } from 'element-plus';
+<script lang="ts" setup name="MTable">
+import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import { getConfig, TMagicTable } from '@tmagic/design';
+
 import ActionsColumn from './ActionsColumn.vue';
 import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';
 
-export default defineComponent({
-  name: 'm-table',
-
-  components: { ExpandColumn, ActionsColumn, PopoverColumn, TextColumn },
-
-  props: {
-    data: {
-      type: Array,
-      require: true,
-    },
-
-    columns: {
-      type: Array as PropType<any[]>,
-      require: true,
-      default: () => [],
-    },
-
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    columns?: any[];
     /** 合并行或列的计算方法 */
-    spanMethod: {
-      type: Function as PropType<
-        (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number]
-      >,
-    },
+    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];
+    loading?: boolean;
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight?: string | number;
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 空数据时显示的文本内容 */
+    emptyText?: string;
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll?: boolean;
+    rowkeyName?: string;
+    /** 是否带有纵向边框 */
+    border?: boolean;
+  }>(),
+  {
+    columns: () => [],
+    loading: false,
+    showHeader: true,
+    defaultExpandAll: false,
+    border: false,
+  },
+);
+
+const emit = defineEmits([
+  'sort-change',
+  'after-action',
+  'select',
+  'select-all',
+  'selection-change',
+  'expand-change',
+  'cell-click',
+]);
+
+const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
+
+const editState = ref([]);
+
+const tableColumnComponent = getConfig('components').tableColumn;
+const selectionColumn = computed(() => {
+  const column = props.columns.filter((item) => item.selection);
+  return column.length ? column[0] : null;
+});
 
-    loading: {
-      type: Boolean,
-      default: false,
-    },
+const tableData = computed(() => {
+  if (selectionColumn.value) {
+    return props.data || [];
+  }
 
-    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
-    bodyHeight: {
-      type: [String, Number],
-    },
+  return cloneDeep(props.data) || [];
+});
 
-    /** 是否显示表头 */
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
+const hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));
 
-    /** 空数据时显示的文本内容 */
-    emptyText: {
-      type: String,
-    },
+const sortChange = (data: any) => {
+  emit('sort-change', data);
+};
 
-    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
+const selectHandler = (selection: any, row: any) => {
+  const column = selectionColumn.value;
+  if (!column) {
+    return;
+  }
 
-    rowkeyName: {
-      type: String,
-    },
+  if (column.selection === 'single') {
+    // this.clearSelection()
+    // this.toggleRowSelection(row, true)
+  }
+  emit('select', selection, row);
+};
 
-    /** 是否带有纵向边框 */
-    border: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const selectAllHandler = (selection: any) => {
+  emit('select-all', selection);
+};
 
-  emits: ['sort-change', 'afterAction', 'select', 'select-all', 'selection-change'],
+const selectionChangeHandler = (selection: any) => {
+  emit('selection-change', selection);
+};
 
-  data(): {
-    editState: any[];
-  } {
-    return {
-      editState: [],
-    };
-  },
+const cellClickHandler = (...args: any[]) => {
+  emit('cell-click', ...args);
+};
 
-  computed: {
-    tableData() {
-      if (this.selectionColumn) {
-        return this.data || [];
-      }
+const expandChange = (...args: any[]) => {
+  emit('expand-change', ...args);
+};
 
-      return cloneDeep(this.data) || [];
-    },
+const toggleRowSelection = (row: any, selected: boolean) => {
+  tMagicTable.value?.toggleRowSelection(row, selected);
+};
 
-    selectionColumn() {
-      const column = this.columns.filter((item) => item.selection);
-      return column.length ? column[0] : null;
-    },
+const toggleRowExpansion = (row: any, expanded: boolean) => {
+  tMagicTable.value?.toggleRowExpansion(row, expanded);
+};
 
-    hasBorder() {
-      return typeof this.border !== 'undefined' ? this.border : true;
-    },
-  },
+const clearSelection = () => {
+  tMagicTable.value?.clearSelection();
+};
 
-  methods: {
-    sortChange(data: any) {
-      this.$emit('sort-change', data);
-    },
-
-    selectHandler(selection: any, row: any) {
-      const column = this.selectionColumn;
-      if (!column) {
-        return;
-      }
-
-      if (column.selection === 'single') {
-        // this.clearSelection()
-        // this.toggleRowSelection(row, true)
-      }
-      this.$emit('select', selection, row);
-    },
-
-    selectAllHandler(selection: any) {
-      this.$emit('select-all', selection);
-    },
-
-    selectionChangeHandler(selection: any) {
-      this.$emit('selection-change', selection);
-    },
-
-    toggleRowSelection(row: any, selected: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowSelection.bind(table)(row, selected);
-    },
-
-    toggleRowExpansion(row: any, expanded: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowExpansion.bind(table)(row, expanded);
-    },
-
-    clearSelection() {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.clearSelection.bind(table)();
-    },
-
-    objectSpanMethod(data: any) {
-      if (typeof this.spanMethod === 'function') {
-        return this.spanMethod(data);
-      }
-      return () => ({
-        rowspan: 0,
-        colspan: 0,
-      });
-    },
-  },
+const objectSpanMethod = (data: any) => {
+  if (typeof props.spanMethod === 'function') {
+    return props.spanMethod(data);
+  }
+  return () => ({
+    rowspan: 0,
+    colspan: 0,
+  });
+};
+
+defineExpose({
+  toggleRowSelection,
+  toggleRowExpansion,
+  clearSelection,
 });
 </script>
 

package/src/TextColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table-column
+  <TMagicTableColumn
     show-overflow-tooltip
     :label="config.label"
     :width="config.width"
@@ -8,7 +8,7 @@
     :prop="config.prop"
   >
     <template v-slot="scope">
-      <el-form v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
+      <TMagicForm v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
         <m-form-container
           :prop="config.prop"
           :rules="config.rules"
@@ -16,62 +16,61 @@
           :name="config.prop"
           :model="editState[scope.$index]"
         ></m-form-container>
-      </el-form>
+      </TMagicForm>
 
-      <el-button v-else-if="config.action === 'actionLink'" text type="primary" @click="config.handler(scope.row)">
-        {{ formatter(config, scope.row) }}
-      </el-button>
+      <TMagicButton
+        v-else-if="config.action === 'actionLink' && config.prop"
+        text
+        type="primary"
+        @click="config.handler?.(scope.row)"
+      >
+        <span v-html="formatter(config, scope.row)"></span>
+      </TMagicButton>
 
-      <a v-else-if="config.action === 'img'" target="_blank" :href="scope.row[config.prop]"
+      <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>
 
-      <a v-else-if="config.action === 'link'" target="_blank" :href="scope.row[config.prop]" class="keep-all">{{
-        scope.row[config.prop]
-      }}</a>
+      <a
+        v-else-if="config.action === 'link' && config.prop"
+        target="_blank"
+        :href="scope.row[config.prop]"
+        class="keep-all"
+        >{{ scope.row[config.prop] }}</a
+      >
 
       <el-tooltip v-else-if="config.action === 'tip'" placement="left">
         <template #content>
           <div>{{ formatter(config, scope.row) }}</div>
         </template>
-        <el-button text type="primary">扩展配置</el-button>
+        <TMagicButton text type="primary">扩展配置</TMagicButton>
       </el-tooltip>
 
-      <el-tag
-        v-else-if="config.action === 'tag'"
+      <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) }}</el-tag
+        >{{ formatter(config, scope.row) }}</TMagicTag
       >
       <div v-else v-html="formatter(config, scope.row)"></div>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup name="MTableColumn">
+import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
 
-export default defineComponent({
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
-
-    editState: {
-      type: Object,
-      default: () => {},
-    },
-  },
-
-  setup() {
-    return {
-      formatter,
-    };
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+    editState?: any;
+  }>(),
+  {
+    config: () => ({}),
+    editState: () => ({}),
   },
-});
+);
 </script>

package/src/index.ts

@@ -22,12 +22,8 @@ import Table from './Table.vue';
 
 export { default as MagicTable } from './Table.vue';
 
-const components = [Table];
-
 export default {
   install(app: App) {
-    components.forEach((component) => {
-      app.component(component.name, component);
-    });
+    app.component('m-table', Table);
   },
 };

package/src/schema.ts

@@ -20,9 +20,10 @@ import { FormConfig, FormValue } from '@tmagic/form';
 
 export interface ColumnActionConfig {
   type?: 'delete' | 'copy' | 'edit';
-  display?: (vm: any, row: any) => boolean;
-  text: string;
+  display?: (row: any) => boolean;
+  text: string | ((row: any) => string);
   name: string;
+  icon?: any;
   handler?: (row: any) => Promise<any> | any;
   before?: (row: any) => void;
   after?: (row: any) => void;
@@ -35,23 +36,29 @@ export type ColumnConfig = {
   values?: FormValue;
   selection?: boolean | 'single';
   selectable?: (row: any, index: number) => boolean;
-  label: string;
+  label?: string;
   fixed?: 'left' | 'right' | boolean;
   width?: number | string;
   actions?: ColumnActionConfig[];
-  type: 'popover' | 'expand' | string | ((value: any, row: any) => string);
-  text: string;
-  prop: string;
-  showHeader: boolean;
+  type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+  text?: string;
+  prop?: string;
+  showHeader?: boolean;
   table?: ColumnConfig[];
   formatter?: 'datetime' | ((item: any, row: Record<string, any>) => any);
-  popover: {
-    placement: '';
-    width: '';
-    trigger: '';
-    tableEmbed: '';
+  popover?: {
+    placement: string;
+    width: string;
+    trigger: string;
+    tableEmbed: string;
   };
   sortable?: boolean | 'custom';
   action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
-  handler: (row: any) => void;
+  handler?: (row: any) => void;
+  /** 当type为expand时有效，展开为html */
+  expandContent?: (row: any, prop?: string) => string;
+  /** 当type为expand时有效，展开为vue组件 */
+  component?: any;
+  /** 当type为expand时有效，展开的vue组件props */
+  props?: any;
 };

package/src/utils.ts

@@ -21,6 +21,8 @@ import { datetimeFormatter } from '@tmagic/utils';
 import { ColumnConfig } from './schema';
 
 export const formatter = (item: ColumnConfig, row: any) => {
+  if (!item.prop) return '';
+
   if (item.formatter) {
     if (item.formatter === 'datetime') {
       // eslint-disable-next-line no-param-reassign