diff --git a/src/components/x-components/x-table-column-filter/index.ts b/src/components/x-components/x-table-column-filter/index.ts
index e7bb857b780903a3fdec65e24f18e64f267c47fe..918c1623fffb7c0c53d7d43e4d923fa19028f90e 100644
--- a/src/components/x-components/x-table-column-filter/index.ts
+++ b/src/components/x-components/x-table-column-filter/index.ts
@@ -1,70 +1,83 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, ref, onMounted, watch } from 'vue'
 
 /** 列数组映射的控制数组 */
 export type ColumnsOption =
-	| undefined
-	| {
-			/** 是否启用列筛选 */
-			filterable: boolean
-			/** 该列是否显示 */
-			visible: boolean
-			/** 该列的label */
-			label: string
-			/** 该列初始化时的props配置 */
-			props: any
-	  }[]
+  | undefined
+  | {
+      /** 是否启用列筛选 */
+      filterable: boolean
+      /** 该列是否显示 */
+      visible: boolean
+      /** 该列的label */
+      label: string
+      /** 该列初始化时的props配置 */
+      props: any
+    }[]
 
 /**
  * table列自动显示隐藏控制组件
  */
 export default defineComponent({
-	props: {
-		effect: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			/** 列数组映射的控制数组 */
-			columns_option: undefined as ColumnsOption,
-		}
-	},
-	methods: {
-		/** 自动处理所有列插槽内容 */
-		initColumns(columns) {
-			this.columns_option = columns.map((it) => ({
-				filterable: it.type?.name == 'ElTableColumn', // 当某个列v-if=false的情况，也会占用一个位置，所以这里要判断组件类型
-				visible: true,
-				label: it.props?.label,
-				props: it.props,
-			}))
-		},
-		/** 获取列数组映射的控制数组 */
-		getColumnsOption() {
-			return this.columns_option
-		},
-	},
-	expose: ['getColumnsOption', 'initColumns'],
-	render() {
-		if (!this.$slots.default) {
-			throw new Error('[x-table-column-filter] need a default slot')
-		}
-		this.initColumns(this.$slots.default())
-		return h(() => {
-			if (!this.$slots.default) {
-				throw new Error('[x-table-column-filter] need a default slot')
-			}
-			let slots = this.$slots.default()
-			if (!this.effect) {
-				return slots
-			}
-			// 根据映射的控制数组实现对列的过滤
-			let result = [] as any[]
-			this.columns_option?.forEach((it, index) => {
-				if (it.visible && slots[index]) result.push(slots[index])
-			})
-			return result
-		})
-	},
+  props: {
+    effect: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      /** 列数组映射的控制数组 */
+      columns_option: undefined as ColumnsOption,
+    }
+  },
+  watch: {
+    // 当插槽内容变化时，重新初始化列配置
+    '$slots.default': function (newSlots) {
+      if (newSlots) {
+        this.initColumns(newSlots())
+      }
+    }
+  },
+  mounted() {
+    // 初始化列
+    if (this.$slots.default) {
+      this.initColumns(this.$slots.default())
+    }
+  },
+  methods: {
+    /** 自动处理所有列插槽内容 */
+    initColumns(columns) {
+      this.columns_option = columns.map((it) => ({
+        filterable: it.type?.name == 'ElTableColumn', // 当某个列v-if=false的情况，也会占用一个位置，所以这里要判断组件类型
+        visible: true,
+        label: it.props?.label,
+        props: it.props,
+      }))
+    },
+    /** 获取列数组映射的控制数组 */
+    getColumnsOption() {
+      return this.columns_option
+    },
+  },
+  render() {
+    if (!this.$slots.default) {
+      throw new Error('[column-filter] need a default slot')
+    }
+
+    // 获取插槽内容
+    const slots = this.$slots.default()
+
+    if (!this.effect) {
+      return slots
+    }
+
+    // 根据映射的控制数组实现对列的过滤
+    const result = [] as any[]
+
+    this.columns_option?.forEach((it, index) => {
+      if (it.visible && slots[index]) result.push(slots[index])
+    })
+
+    return result
+  },
 })