diff --git a/packages/devui-vue/devui/table/src/column/use-column.ts b/packages/devui-vue/devui/table/src/column/use-column.ts
index 3c63818d2f..df395ba058 100644
--- a/packages/devui-vue/devui/table/src/column/use-column.ts
+++ b/packages/devui-vue/devui/table/src/column/use-column.ts
@@ -1,12 +1,12 @@
 import { watch, reactive, onBeforeMount, ToRefs, Slots, h } from 'vue';
-import { Column, TableColumnPropsTypes } from './column.type'
+import { Column, TableColumnPropsTypes } from './column.type';
 import { formatWidth, formatMinWidth } from '../utils';
 
+function defaultRenderHeader(this: Column) {
+  return h('span', { class: 'title' }, this.header);
+}
 
-export function createColumn<T extends Record<string, unknown> = any>(
-  props: ToRefs<TableColumnPropsTypes>,
-  templates: Slots
-): Column<T> {
+export function createColumn<T extends Record<string, unknown> = any>(props: ToRefs<TableColumnPropsTypes>, templates: Slots): Column<T> {
   const {
     field,
     header,
@@ -20,43 +20,63 @@ export function createColumn<T extends Record<string, unknown> = any>(
     filterMultiple,
     order,
     fixedLeft,
-    fixedRight
+    fixedRight,
   } = props;
   const column: Column = reactive({});
 
-  watch([field, header, order], ([field, header, order]) => {
-    column.field = field;
-    column.header = header;
-    column.order = order;
-  }, { immediate: true });
+  function defaultRenderCell<K extends Record<string, unknown>>(rowData: K, index: number) {
+    const value = rowData[this.field];
+    if (templates.default) {
+      return templates.default(rowData);
+    }
+    if (this.formatter) {
+      return this.formatter(rowData, value, index);
+    }
+
+    return value?.toString?.() ?? '';
+  }
+
+  watch(
+    [field, header, order],
+    ([fieldVal, headerVal, orderVal]) => {
+      column.field = fieldVal;
+      column.header = headerVal;
+      column.order = orderVal;
+    },
+    { immediate: true }
+  );
 
   // 排序功能
-  watch([sortable, compareFn], ([sortable, compareFn]) => {
-    column.sortable = sortable;
-    column.compareFn = compareFn;
-  })
+  watch([sortable, compareFn], ([sortableVal, compareFnVal]) => {
+    column.sortable = sortableVal;
+    column.compareFn = compareFnVal;
+  });
 
   // 过滤功能
-  watch([
-    filterable,
-    filterList,
-    filterMultiple,
-  ], ([filterable, filterList, filterMultiple]) => {
-    column.filterable = filterable;
-    column.filterMultiple = filterMultiple;
-    column.filterList = filterList;
-  }, { immediate: true })
+  watch(
+    [filterable, filterList, filterMultiple],
+    ([filterableVal, filterListVal, filterMultipleVal]) => {
+      column.filterable = filterableVal;
+      column.filterMultiple = filterMultipleVal;
+      column.filterList = filterListVal;
+    },
+    { immediate: true }
+  );
 
   // 固定左右功能
-  watch([fixedLeft, fixedRight], ([left, right]) => {
-    column.fixedLeft = left;
-    column.fixedRight = right;
-  }, { immediate: true });
+  watch(
+    [fixedLeft, fixedRight],
+    ([left, right]) => {
+      column.fixedLeft = left;
+      column.fixedRight = right;
+    },
+    { immediate: true }
+  );
 
   // 宽度
-  watch([width, minWidth], ([width, minWidth]) => {
-    column.width = formatWidth(width);
-    column.minWidth = formatMinWidth(minWidth);
+  watch([width, minWidth], ([widthVal, minWidthVal]) => {
+    column.width = formatWidth(widthVal);
+    column.minWidth = formatMinWidth(minWidthVal);
     column.realWidth = column.width || column.minWidth;
   });
 
@@ -71,15 +91,3 @@ export function createColumn<T extends Record<string, unknown> = any>(
 
   return column;
 }
-
-function defaultRenderHeader(this: Column) {
-  return h('span', { class: 'title' }, this.header);
-}
-
-function defaultRenderCell<T extends Record<string, unknown>>(this: Column, rowData: T, index: number) {
-  const value = rowData[this.field];
-  if (this.formatter) {
-    return this.formatter(rowData, value, index);
-  }
-  return value?.toString?.() ?? '';
-}
diff --git a/packages/devui-vue/devui/table/src/fix-header.tsx b/packages/devui-vue/devui/table/src/fix-header.tsx
new file mode 100644
index 0000000000..90061c33ed
--- /dev/null
+++ b/packages/devui-vue/devui/table/src/fix-header.tsx
@@ -0,0 +1,36 @@
+import { defineComponent } from 'vue';
+import ColGroup from './colgroup/colgroup';
+import TableHeader from './header/header';
+import TableBody from './body/body';
+
+export default defineComponent({
+  props: {
+    classes: {
+      type: Object,
+      default: () => ({}),
+    },
+    isEmpty: {
+      type: Boolean,
+    },
+  },
+  setup(props: { classes: Record<string, unknown>; isEmpty: boolean }) {
+    return () => {
+      return (
+        <div class='devui-table-view'>
+          <div style='overflow:hidden scroll;'>
+            <table class={props.classes} cellpadding='0' cellspacing='0'>
+              <ColGroup />
+              <TableHeader />
+            </table>
+          </div>
+          <div class='scroll-view'>
+            <table class={props.classes} cellpadding='0' cellspacing='0'>
+              <ColGroup />
+              {!props.isEmpty && <TableBody style='flex: 1' />}
+            </table>
+          </div>
+        </div>
+      );
+    };
+  },
+});
diff --git a/packages/devui-vue/devui/table/src/normal-header.tsx b/packages/devui-vue/devui/table/src/normal-header.tsx
new file mode 100644
index 0000000000..de1d373376
--- /dev/null
+++ b/packages/devui-vue/devui/table/src/normal-header.tsx
@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue';
+import ColGroup from './colgroup/colgroup';
+import TableHeader from './header/header';
+import TableBody from './body/body';
+
+export default defineComponent({
+  props: {
+    classes: {
+      type: Object,
+      default: () => ({}),
+    },
+    isEmpty: {
+      type: Boolean,
+    },
+  },
+  setup(props: { classes: Record<string, unknown>; isEmpty: boolean }) {
+    return () => {
+      return (
+        <table class={props.classes} cellpadding='0' cellspacing='0'>
+          <ColGroup />
+          <TableHeader style='position:relative' />
+          {!props.isEmpty && <TableBody />}
+        </table>
+      );
+    };
+  },
+});
diff --git a/packages/devui-vue/devui/table/src/store/index.ts b/packages/devui-vue/devui/table/src/store/index.ts
index 205ff0fac2..9d96d00a86 100644
--- a/packages/devui-vue/devui/table/src/store/index.ts
+++ b/packages/devui-vue/devui/table/src/store/index.ts
@@ -3,27 +3,31 @@ import { Column, CompareFn, FilterResults } from '../column/column.type';
 import { SortDirection } from '../table.type';
 export interface TableStore<T = Record<string, any>> {
   states: {
-    _data: Ref<T[]>
-    _columns: Ref<Column[]>
-    _checkList: Ref<boolean[]>
-    _checkAll: Ref<boolean>
-    _halfChecked: Ref<boolean>
-    isFixedLeft: Ref<boolean>
-  }
-  insertColumn(column: Column): void
-  sortColumn(): void
-  removeColumn(column: Column): void
-  getCheckedRows(): T[]
-  sortData(field: string, direction: SortDirection, compareFn: CompareFn<T>): void
-  filterData(field: string, results: FilterResults): void
-  resetFilterData(): void
+    _data: Ref<T[]>;
+    _columns: Ref<Column[]>;
+    _checkList: Ref<boolean[]>;
+    _checkAll: Ref<boolean>;
+    _halfChecked: Ref<boolean>;
+    isFixedLeft: Ref<boolean>;
+  };
+  insertColumn(column: Column): void;
+  sortColumn(): void;
+  removeColumn(column: Column): void;
+  getCheckedRows(): T[];
+  sortData(field: string, direction: SortDirection, compareFn: CompareFn<T>): void;
+  filterData(field: string, results: FilterResults): void;
+  resetFilterData(): void;
 }
 
 export function createStore<T>(dataSource: Ref<T[]>): TableStore<T> {
   const _data: Ref<T[]> = ref([]);
-  watch(dataSource, (value: T[]) => {
-    _data.value = [...value];
-  }, { deep: true, immediate: true });
+  watch(
+    dataSource,
+    (value: T[]) => {
+      _data.value = [...value];
+    },
+    { deep: true, immediate: true }
+  );
 
   const { _columns, insertColumn, removeColumn, sortColumn } = createColumnGenerator();
   const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
@@ -39,7 +43,7 @@ export function createStore<T>(dataSource: Ref<T[]>): TableStore<T> {
       _checkList,
       _checkAll,
       _halfChecked,
-      isFixedLeft
+      isFixedLeft,
     },
     insertColumn,
     sortColumn,
@@ -47,38 +51,38 @@ export function createStore<T>(dataSource: Ref<T[]>): TableStore<T> {
     getCheckedRows,
     sortData,
     filterData,
-    resetFilterData
+    resetFilterData,
   };
 }
 
 /**
  * 列生成器
- * @returns 
+ * @returns
  */
 const createColumnGenerator = () => {
   const _columns: Ref<Column[]> = ref([]);
 
   /**
    * 插入当前列
-   * @param {Column} column 
+   * @param {Column} column
    */
   const insertColumn = (column: Column) => {
     _columns.value.push(column);
     // 实际上就是插入排序
-    _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
+    _columns.value.sort((a, b) => a.order - b.order);
   };
 
   /**
    * 对 column 进行排序
    */
   const sortColumn = () => {
-    _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
-  }
+    _columns.value.sort((a, b) => (a.order > b.order ? 1 : -1));
+  };
 
   /**
    * 移除当前列
-   * @param {Column} column 
-   * @returns 
+   * @param {Column} column
+   * @returns
    */
   const removeColumn = (column: Column) => {
     const i = _columns.value.findIndex((v) => v === column);
@@ -86,15 +90,15 @@ const createColumnGenerator = () => {
       return;
     }
     _columns.value.splice(i, 1);
-  }
+  };
   return { _columns, insertColumn, removeColumn, sortColumn };
-}
+};
 
 /**
  * 选择功能
- * @param dataSource 
- * @param _data 
- * @returns 
+ * @param dataSource
+ * @param _data
+ * @returns
  */
 const createSelection = <T>(dataSource: Ref<T[]>, _data: Ref<T[]>) => {
   const _checkList: Ref<boolean[]> = ref([]);
@@ -107,30 +111,37 @@ const createSelection = <T>(dataSource: Ref<T[]>, _data: Ref<T[]>) => {
       for (let i = 0; i < _checkList.value.length; i++) {
         _checkList.value[i] = val;
       }
-    }
+    },
   });
   const _halfChecked = ref(false);
 
-  watch(dataSource, (value: T[]) => {
-    _checkList.value = new Array(value.length).fill(false);
-  }, { deep: true, immediate: true });
+  watch(
+    dataSource,
+    (value: T[]) => {
+      _checkList.value = new Array(value.length).fill(false);
+    },
+    { deep: true, immediate: true }
+  );
 
   // checkList 只有全为true的时候
-  watch(_checkList, (list) => {
-    if (list.length === 0) {
-      return;
-    }
-    let allTrue = true;
-    let allFalse = true;
-    for (let i = 0; i < list.length; i++) {
-      allTrue &&= list[i];
-      allFalse &&= !list[i];
-    }
-
-    _checkAllRecord.value = allTrue;
-    _halfChecked.value = !(allFalse || allTrue);
+  watch(
+    _checkList,
+    (list) => {
+      if (list.length === 0) {
+        return;
+      }
+      let allTrue = true;
+      let allFalse = true;
+      for (let i = 0; i < list.length; i++) {
+        allTrue &&= list[i];
+        allFalse &&= !list[i];
+      }
 
-  }, { immediate: true, deep: true });
+      _checkAllRecord.value = allTrue;
+      _halfChecked.value = !(allFalse || allTrue);
+    },
+    { immediate: true, deep: true }
+  );
 
   /**
    * 获取当前已选数据
@@ -138,51 +149,51 @@ const createSelection = <T>(dataSource: Ref<T[]>, _data: Ref<T[]>) => {
    */
   const getCheckedRows = (): T[] => {
     return _data.value.filter((_, index) => _checkList.value[index]);
-  }
+  };
 
   return {
     _checkList,
     _checkAll,
     _halfChecked,
-    getCheckedRows
+    getCheckedRows,
   };
-}
+};
 
 /**
  * 排序功能
  * @template T
- * @param dataSource 
- * @param _data 
+ * @param dataSource
+ * @param _data
  */
 const createSorter = <T>(dataSource: Ref<T[]>, _data: Ref<T[]>) => {
   /**
    * 对数据进行排序
-   * @param {string} field 
-   * @param {SortDirection} direction 
+   * @param {string} field
+   * @param {SortDirection} direction
    * @param {CompareFn<T>} compareFn
    */
   const sortData = (
     field: string,
     direction: SortDirection,
-    compareFn: CompareFn<T> = (field: string, a: T, b: T) => a[field] > b[field]
+    compareFn: CompareFn<T> = (fieldKey: string, a: T, b: T) => a[fieldKey] > b[fieldKey]
   ) => {
     if (direction === 'ASC') {
-      _data.value = _data.value.sort((a, b) => compareFn(field, a, b) ? 1 : -1);
+      _data.value = _data.value.sort((a, b) => (compareFn(field, a, b) ? 1 : -1));
     } else if (direction === 'DESC') {
-      _data.value = _data.value.sort((a, b) => !compareFn(field, a, b) ? 1 : -1);
+      _data.value = _data.value.sort((a, b) => (!compareFn(field, a, b) ? 1 : -1));
     } else {
       _data.value = [...dataSource.value];
     }
-  }
+  };
   return { sortData };
-}
+};
 
 /**
  * 过滤功能
  * @template T
- * @param dataSource 
- * @param _data 
- * @returns 
+ * @param dataSource
+ * @param _data
+ * @returns
  */
 const createFilter = <T>(dataSource: Ref<T[]>, _data: Ref<T[]>) => {
   // 过滤数据所需要的
@@ -193,26 +204,26 @@ const createFilter = <T>(dataSource: Ref<T[]>, _data: Ref<T[]>) => {
   const filterData = (field: string, results: FilterResults) => {
     fieldSet.add(field);
     const fields = [...fieldSet];
-    _data.value = dataSource.value.filter(item => {
-      return fields.reduce<boolean>((prev, field) => {
-        return prev && (results.indexOf(item[field]) !== -1)
+    _data.value = dataSource.value.filter((item) => {
+      return fields.reduce<boolean>((prev, fieldKey) => {
+        return prev && results.indexOf(item[fieldKey]) !== -1;
       }, true);
     });
-  }
+  };
   /**
    * 重置数据为最开始的状态
    */
   const resetFilterData = () => {
     fieldSet.clear();
     _data.value = [...dataSource.value];
-  }
+  };
   return { filterData, resetFilterData };
-}
+};
 
 const createFixedLogic = (columns: Ref<Column[]>) => {
   const isFixedLeft = computed(() => {
     return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
   });
 
-  return { isFixedLeft }
-}
+  return { isFixedLeft };
+};
diff --git a/packages/devui-vue/devui/table/src/table.tsx b/packages/devui-vue/devui/table/src/table.tsx
index 4e52c19a62..bb1b74b7bf 100644
--- a/packages/devui-vue/devui/table/src/table.tsx
+++ b/packages/devui-vue/devui/table/src/table.tsx
@@ -2,13 +2,10 @@ import { provide, defineComponent, getCurrentInstance, computed, toRef } from 'v
 import { Table, TableProps, TablePropsTypes, TABLE_TOKEN } from './table.type';
 import { useTable } from './use-table';
 import { createStore } from './store';
-import ColGroup from './colgroup/colgroup';
-import TableHeader from './header/header';
-import TableBody from './body/body';
-
+import FixHeader from './fix-header';
+import NormalHeader from './normal-header';
 import './table.scss';
 
-
 export default defineComponent({
   name: 'DTable',
   props: TableProps,
@@ -17,52 +14,25 @@ export default defineComponent({
     const store = createStore(toRef(props, 'data'));
     table.store = store;
     provide(TABLE_TOKEN, table);
-
     const { classes, style } = useTable(props);
-
     const isEmpty = computed(() => props.data.length === 0);
 
-    const fixHeaderCompo = computed(() => {
-      return (
-        <div class="devui-table-view">
-          <div style="overflow: hidden scroll;">
-            <table class={classes.value} cellpadding="0" cellspacing="0">
-              <ColGroup />
-              <TableHeader />
-            </table>
-          </div>
-          <div class="scroll-view">
-            <table class={classes.value} cellpadding="0" cellspacing="0">
-              <ColGroup />
-              {!isEmpty.value && <TableBody style="flex: 1" />}
-            </table>
-          </div>
-        </div>
-      );
-    });
-
-    const normalHeaderCompo = computed(() => {
-      return (
-        <table class={classes.value} cellpadding="0" cellspacing="0">
-          <ColGroup />
-          <TableHeader style="position: relative" />
-          {!isEmpty.value && <TableBody />}
-        </table>
-      )
-    });
-
     ctx.expose({
       getCheckedRows() {
         return store.getCheckedRows();
-      }
+      },
     });
 
     return () => (
-      <div class="devui-table-wrapper" style={style.value} v-dLoading={props.showLoading}>
+      <div class='devui-table-wrapper' style={style.value} v-dLoading={props.showLoading}>
         {ctx.slots.default()}
-        {props.fixHeader ? fixHeaderCompo.value : normalHeaderCompo.value}
-        {isEmpty.value && <div class="devui-table-empty">No Data</div>}
+        {props.fixHeader ? (
+          <FixHeader classes={classes.value} is-empty={isEmpty.value} />
+        ) : (
+          <NormalHeader classes={classes.value} is-empty={isEmpty.value} />
+        )}
+        {isEmpty.value && <div class='devui-table-empty'>No Data</div>}
       </div>
     );
-  }
+  },
 });
diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md
index 762e2d7622..e09fe58ef0 100644
--- a/packages/devui-vue/docs/components/table/index.md
+++ b/packages/devui-vue/docs/components/table/index.md
@@ -18,45 +18,52 @@
     <d-column field="lastName" header="Last Name"></d-column>
     <d-column field="gender" header="Gender"></d-column>
     <d-column field="date" header="Date of birth"></d-column>
+    <d-column header="Operation">
+      <template #default="scope">
+        <d-button @click="handleClick(scope)">编辑</d-button>
+      </template>
+    </d-column>
   </d-table>
 </template>
 
 <script>
-  import { defineComponent, ref } from 'vue'
-
-  export default defineComponent({
-    setup() {
-      const baseTableData = ref([
-        {
-          firstName: 'Mark',
-          lastName: 'Otto',
-          date: '1990/01/11',
-          gender: 'Male',
-        },
-        {
-          firstName: 'Jacob',
-          lastName: 'Thornton',
-          gender: 'Female',
-          date: '1990/01/12',
-        },
-        {
-          firstName: 'Danni',
-          lastName: 'Chen',
-          gender: 'Male',
-          date: '1990/01/13',
-        },
-        {
-          firstName: 'green',
-          lastName: 'gerong',
-          gender: 'Male',
-          date: '1990/01/14',
-        }
-      ])
-
-      return { baseTableData }
-    }
-  })
-
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const baseTableData = ref([
+      {
+        firstName: 'Mark',
+        lastName: 'Otto',
+        date: '1990/01/11',
+        gender: 'Male',
+      },
+      {
+        firstName: 'Jacob',
+        lastName: 'Thornton',
+        gender: 'Female',
+        date: '1990/01/12',
+      },
+      {
+        firstName: 'Danni',
+        lastName: 'Chen',
+        gender: 'Male',
+        date: '1990/01/13',
+      },
+      {
+        firstName: 'green',
+        lastName: 'gerong',
+        gender: 'Male',
+        date: '1990/01/14',
+      },
+    ]);
+    const handleClick = (scope) => {
+      console.log(scope);
+    };
+
+    return { baseTableData, handleClick };
+  },
+});
 </script>
 ```
 
@@ -68,21 +75,21 @@
 
 ```vue
 <template>
-<div class="table-btn-groups">
-      <div class="table-btn">
-          自动表格布局：
-         <d-switch v-model:checked="tableLayout" />
-      </div>
-      <div class="table-btn">
-          斑马纹：
-         <d-switch v-model:checked="striped" />
-      </div>
-      <div class="table-btn">
-          表头背景色：
-         <d-switch v-model:checked="headerBg" />
-      </div>
+  <div class="table-btn-groups">
+    <div class="table-btn">
+      自动表格布局：
+      <d-switch v-model:checked="tableLayout" />
+    </div>
+    <div class="table-btn">
+      斑马纹：
+      <d-switch v-model:checked="striped" />
+    </div>
+    <div class="table-btn">
+      表头背景色：
+      <d-switch v-model:checked="headerBg" />
+    </div>
   </div>
-  <d-table :table-layout="tableLayout?'auto':'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData">
+  <d-table :table-layout="tableLayout ? 'auto' : 'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData">
     <d-column field="firstName" header="First Name"></d-column>
     <d-column field="lastName" header="Last Name"></d-column>
     <d-column field="gender" header="Gender"></d-column>
@@ -91,57 +98,56 @@
 </template>
 
 <script>
-
-  import { defineComponent, ref } from 'vue'
-
-  export default defineComponent({
-    setup() {
-      const tableLayout = ref(false)
-      const striped = ref(false)
-      const headerBg = ref(false)
-      const stripedTableData = ref([
-        {
-          firstName: 'Mark',
-          lastName: 'Otto',
-          date: '1990/01/11',
-          gender: 'Male',
-        },
-        {
-          firstName: 'Jacob',
-          lastName: 'Thornton',
-          gender: 'Female',
-          date: '1990/01/12',
-        },
-        {
-          firstName: 'Danni',
-          lastName: 'Chen',
-          gender: 'Male',
-          date: '1990/01/13',
-        },
-        {
-          firstName: 'green',
-          lastName: 'gerong',
-          gender: 'Male',
-          date: '1990/01/14',
-        }
-      ])
-
-      return { 
-        stripedTableData,
-        striped,
-        headerBg,
-        tableLayout 
-      }
-    }
-  })
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const tableLayout = ref(false);
+    const striped = ref(false);
+    const headerBg = ref(false);
+    const stripedTableData = ref([
+      {
+        firstName: 'Mark',
+        lastName: 'Otto',
+        date: '1990/01/11',
+        gender: 'Male',
+      },
+      {
+        firstName: 'Jacob',
+        lastName: 'Thornton',
+        gender: 'Female',
+        date: '1990/01/12',
+      },
+      {
+        firstName: 'Danni',
+        lastName: 'Chen',
+        gender: 'Male',
+        date: '1990/01/13',
+      },
+      {
+        firstName: 'green',
+        lastName: 'gerong',
+        gender: 'Male',
+        date: '1990/01/14',
+      },
+    ]);
+
+    return {
+      stripedTableData,
+      striped,
+      headerBg,
+      tableLayout,
+    };
+  },
+});
 </script>
 
 <style lang="scss">
-.table-btn-groups{
+.table-btn-groups {
   display: flex;
   margin-bottom: 1rem;
 }
-.table-btn{
+.table-btn {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -169,65 +175,58 @@
 </template>
 
 <script>
+import { defineComponent, ref } from 'vue';
 
-  import { defineComponent, ref } from 'vue'
-
-  export default defineComponent({
-    setup() {
-      const emptyData = ref([])
-      const handleClick = () => {
-        emptyData.value = [
-          {
-            firstName: 'po',
-            lastName: 'Lang',
-            gender: 'Male',
-            date: '1990/01/15',
-          },
-          {
-            firstName: 'john',
-            lastName: 'Li',
-            gender: 'Female',
-            date: '1990/01/16',
-          },
-          {
-            firstName: 'peng',
-            lastName: 'Li',
-            gender: 'Male',
-            date: '1990/01/17',
-          },
-          {
-            firstName: 'Dale',
-            lastName: 'Yu',
-            gender: 'Female',
-            date: '1990/01/18',
-          }
-        ]
-      }
-
-      return { emptyData, handleClick }
-    }
-  })
+export default defineComponent({
+  setup() {
+    const emptyData = ref([]);
+    const handleClick = () => {
+      emptyData.value = [
+        {
+          firstName: 'po',
+          lastName: 'Lang',
+          gender: 'Male',
+          date: '1990/01/15',
+        },
+        {
+          firstName: 'john',
+          lastName: 'Li',
+          gender: 'Female',
+          date: '1990/01/16',
+        },
+        {
+          firstName: 'peng',
+          lastName: 'Li',
+          gender: 'Male',
+          date: '1990/01/17',
+        },
+        {
+          firstName: 'Dale',
+          lastName: 'Yu',
+          gender: 'Female',
+          date: '1990/01/18',
+        },
+      ];
+    };
+
+    return { emptyData, handleClick };
+  },
+});
 </script>
 ```
 
 :::
 
-
 ### 固定列
+
 :::demo
+
 ```vue
 <template>
   <div>
     <d-button type="primary" @click="handleClick">更新数据</d-button>
     <d-table :data="emptyData" :scrollable="true">
-      <d-column 
-        field="firstName" 
-        header="First Name" 
-        filterable 
-        :filterList="filterList"
-        :order="2"
-        :minWidth="100"
-      ></d-column>
+      <d-column field="firstName" header="First Name" filterable :filterList="filterList" :order="2" :minWidth="100"></d-column>
       <d-column field="lastName" header="Last Name" :order="3"></d-column>
       <d-column field="gender" header="Gender" :order="5"></d-column>
       <d-column field="date" header="Date of birth" :order="4"></d-column>
@@ -242,68 +241,68 @@
 </template>
 
 <script>
+import { defineComponent, ref, computed } from 'vue';
 
-  import { defineComponent, ref, computed } from 'vue'
-
-  export default defineComponent({
-    setup() {
-      const emptyData = ref([])
-      const handleClick = () => {
-        emptyData.value = [
-          {
-            firstName: 'po',
-            lastName: 'Lang',
-            gender: 'Male',
-            date: '1990/01/15',
-            address: 'Shenzhen Guangdong',
-            occupation: 'Worker',
-            idNo: '2000**********9999'
-          },
-          {
-            firstName: 'john',
-            lastName: 'Li',
-            gender: 'Female',
-            date: '1990/01/16',
-            address: 'Shenzhen Guangdong',
-            occupation: 'Worker',
-            idNo: '2000**********9999'
-          },
-          {
-            firstName: 'peng',
-            lastName: 'Li',
-            gender: 'Male',
-            date: '1990/01/17',
-            address: 'Shenzhen Guangdong',
-            occupation: 'Worker',
-            idNo: '2000**********9999'
-          },
-          {
-            firstName: 'Dale',
-            lastName: 'Yu',
-            gender: 'Female',
-            date: '1990/01/18',
-            address: 'Shenzhen Guangdong',
-            occupation: 'Worker',
-            idNo: '2000**********9999'
-          }
-        ]
-      }
-      const filterList = computed(() => emptyData.value.map(
-        item => ({name: `${item.firstName} ${item.lastName}`, value: item.firstName})
-      ));
-
-      return { 
-        emptyData, 
-        handleClick,
-        filterList
-      }
-    }
-  })
+export default defineComponent({
+  setup() {
+    const emptyData = ref([]);
+    const handleClick = () => {
+      emptyData.value = [
+        {
+          firstName: 'po',
+          lastName: 'Lang',
+          gender: 'Male',
+          date: '1990/01/15',
+          address: 'Shenzhen Guangdong',
+          occupation: 'Worker',
+          idNo: '2000**********9999',
+        },
+        {
+          firstName: 'john',
+          lastName: 'Li',
+          gender: 'Female',
+          date: '1990/01/16',
+          address: 'Shenzhen Guangdong',
+          occupation: 'Worker',
+          idNo: '2000**********9999',
+        },
+        {
+          firstName: 'peng',
+          lastName: 'Li',
+          gender: 'Male',
+          date: '1990/01/17',
+          address: 'Shenzhen Guangdong',
+          occupation: 'Worker',
+          idNo: '2000**********9999',
+        },
+        {
+          firstName: 'Dale',
+          lastName: 'Yu',
+          gender: 'Female',
+          date: '1990/01/18',
+          address: 'Shenzhen Guangdong',
+          occupation: 'Worker',
+          idNo: '2000**********9999',
+        },
+      ];
+    };
+    const filterList = computed(() =>
+      emptyData.value.map((item) => ({ name: `${item.firstName} ${item.lastName}`, value: item.firstName }))
+    );
+
+    return {
+      emptyData,
+      handleClick,
+      filterList,
+    };
+  },
+});
 </script>
 ```
+
 :::
 
-### d-table Props
+### d-table 参数
 
 | 参数                  | 类型                | 默认值    | 说明                            |
 | --------------------- | ------------------- | --------- | ------------------------------- |
@@ -319,7 +318,8 @@
 | show-loading          | `Boolean`           | `false`   | 显示加载动画                    |
 | header-bg             | `Boolean`           | `false`   | 头部背景                        |
 | table-layout          | `'fixed' \| 'auto'` | `'fixed'` | 表格布局，可选值为'auto'        |
-### d-column Props
+
+### d-column 参数
 
 | 参数      | 类型                                     | 默认值                                 | 说明                           |
 | --------- | ---------------------------------------- | -------------------------------------- | ------------------------------ |
@@ -330,3 +330,9 @@
 | sortable  | `Boolean`                                | `false`                                | 对行数据按照该列的顺序进行排序 |
 | formatter | `Function`                               | ` `                                    | 对应列的所有单元格的格式       |
 | compareFn | `(field: string, a: T, b: T) => boolean` | `(field, a, b) => a[field] > b[field]` | 用于排序的比较函数             |
+
+### d-column 插槽
+
+| 名称    | 说明                   |
+| ------- | ---------------------- |
+| default | 默认插槽，自定义列内容 |