理解了，我会将属性、事件等信息用表格的形式展示出来，让文档更加清晰易读。下面是更新后的文档草稿：

TableFilter 表格筛选组件文档

简介

TableFilter 是一个用于实现表格筛选功能的 Vue 组件。它可以让用户轻松地添加、删除和修改表格的筛选条件，提升了用户对表格数据的控制和操作体验。

使用方式

<TableFilter icon='add-p' :columns="columns" :tableRef="tableRef" >
点我筛选

<template>
  <TableFilter icon="add-p" :columns="columns" :tableRef="tableRef">
    <IconButton icon="f">点我筛选</IconButton>
  </TableFilter>
</template>

<script setup>
import TableFilter from '@/components/TableFilter/TableFilter.tsx'
import IconButton from '@/components/IconButton/IconButton.tsx'
import { ref } from 'vue'
const columns = [
  {
    prop: 'name',
    title: '姓名',
    el: 'input',
    placeholder: '请输入姓名',
  },
]
const tableRef = ref(null)
</script>

Props

属性名	类型	默认值	说明
columns	Array	[]	表格的列配置
tableRef	Object	null	表格的引用
modelValue	Object	null	当前组件的值
text	String	''	按钮文本
fieldMap	Object	{}	字段映射
options	Array	[]	选项
defaultOptions	Array	[]	默认选项

Events

事件名	说明
update:modelValue	更新组件的值
data	发送数据事件
change	筛选条件变化事件

插槽

名称	说明
default	用于自定义触发筛选的内容

方法

方法名	说明
onAddFilter	添加筛选条件
onReset	重置筛选条件
onSearchTable	搜索表格数据

注意事项

需要提供合适的 columns 配置和 tableRef 引用才能正常使用组件。
可以根据具体业务需求，通过插槽自定义触发筛选的内容。

这样的表格形式更加直观，方便用户查阅组件的属性、事件和方法。