# 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`，列将始终显示

