# TableColumn 组件

一个自动处理列显示/隐藏的 `el-table-column` 包装组件。

## 功能

- 自动根据 `isColumnVisible` 函数控制列的显示/隐藏
- 完全兼容 `el-table-column` 的所有属性和插槽
- 无需在每个列上手动添加 `v-if="isColumnVisible('xxx')"`

## 使用方法

### 1. 在父组件中提供 `isColumnVisible` 函数

```vue
<template>
	<el-table ref="tableRef">
		<TableColumnProvider :is-column-visible="isColumnVisible">
			<TableColumn prop="name" label="姓名" width="120" />
			<TableColumn prop="age" label="年龄" width="80" />
		</TableColumnProvider>
	</el-table>
</template>

<script setup>
import { provide } from 'vue';
import TableColumnProvider from '/@/components/TableColumn/Provider.vue';
import TableColumn from '/@/components/TableColumn/index.vue';

const isColumnVisible = (propOrLabel: string) => {
	// 你的列显示逻辑
	return true;
};

provide('isColumnVisible', isColumnVisible);
</script>
```

### 2. 直接使用（如果已经在父组件中 provide）

```vue
<template>
	<el-table>
		<TableColumn prop="name" label="姓名" width="120" />
		<TableColumn prop="age" label="年龄" width="80" />
	</el-table>
</template>

<script setup>
import TableColumn from '/@/components/TableColumn/index.vue';
</script>
```

## Props

继承 `el-table-column` 的所有属性，包括：

- `prop`: 列的字段名
- `label`: 列的标题
- `width`: 列宽度
- `min-width`: 最小宽度
- `fixed`: 是否固定
- 等等...

## Slots

继承 `el-table-column` 的所有插槽，包括：

- `default`: 默认插槽
- `header`: 表头插槽
- 等等...

## 注意事项

1. 需要在父组件中使用 `provide` 提供 `isColumnVisible` 函数，或者使用 `TableColumnProvider` 组件
2. `isColumnVisible` 函数接收 `prop` 或 `label` 作为参数
3. 如果既没有 `prop` 也没有 `label`，列将始终显示
