vue3：defineExpose 父组件应用子组件的方法

defineExpose 顾名思义就是把数据导出，供父组件使用，相当于子传父

• 封装了table组件，父组件中需要操作table的相关内容

子组件TableColumns

<el-table
    ref="tableRef"
    :data="processTableData"
    :border="border"
    :row-key="rowKey"
    :stripe="stripe"
    @selection-change="selectionChange"
></el-table>

<script setup lang="ts" name="TableColumns">

    const tableRef = ref<InstanceType<typeof ElTable>>()
    
    // 清空选中数据列表
    const clearSelection = () => tableRef.value!.clearSelection()
    
    //清空筛选中的数据列表
    const clearFilter = () => {
        tableRef.value!.clearFilter()
    }
    // 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
    defineExpose({
        element: tableRef,
        clearSelection,
        clearFilter,
        isSelected,
        selectedList,
        selectedListIds,
    })
  </script>

父组件List

 <TableColumns
    ref="tableRefs"
    v-loading="loading"
    :isPageable="false"
    :tableData="tabList[activeName].tableData"
    :columns="columns"
></TableColumns>
<script setup lang="tsx">

const tableRef = ref<TableInstance>()
const filterHandler = (value: string, row: any, column: any) => {
    const property = column['property']
    return row[property] == value
}
const clearFilter = () => {
    tableRefs.value!.clearFilter()
}
const columns = reactive<ColumnProps<any>[]>([
    {
        label: '热点类型',
        prop: 'categoryType',
        type: 'enum',
        enum: CATEGORY_TYPE_BALANCE,
        fieldNames: { label: 'text', value: 'value' },
        columnKey: 'categoryType',
        filterMultiple: false,
        filterMethod: filterHandler,
        filters: CATEGORY_TYPE_BALANCE,
    }
])

const handleChangeTabs = (tab: TabsPaneContext) => {
    activeName.value = tab.paneName
    clearFilter()//清空筛选项
    getTableList()
}