vue3 hooks el-table封装 （未使用ts版本）

 基于elementuiPlus el-table 表格

import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
/**
 * @FileDescription: el-table 函数式组件hooks,
 * @function:useTable(config)
 * @param {object} config useTable(配置项)
 * @param {function} config.loadDataFunc 分页列表接口函数
 * @param {object} config.queryForm 表单配置
 * @param {function} config.deleteDataFunc 删除接口函数
 * @param {object} config.options 内部函数配置项(分页 | 接口配置)
 * @param {boolean} config.options.immediate 是否默认执行
 * @param {object} config.options.pageSizeConfig 分页字段配置
 * @param {string} config.options.pageSizeConfig.table_page 页数
 * @param {string} config.options.pageSizeConfig.table_size 页码
 * @param {string} config.options.pageSizeConfig.table_pageNum 默认页数
 * @param {string} config.options.pageSizeConfig.table_sizeNum 默认页码
 * @param {object} config.options.apiConfig 列表接口返回值配置
 * @param {string} config.options.apiConfig.dataProp 返回值字段名
 * @param {string} config.options.apiConfig.total 返回值总数字段名
 * @returns {array} 【tableData-- 表格值】;
 * @returns {array} 【multipleSelection -- 表格多选数组】;
 * @returns {boolean} 【lodding -- 列表接口加载状态】;
 * @returns {object} 【pagination -- 分页数据】;
 * @returns {number} 【total -- 分页总数】;
 * @returns {function} 【getData -- 分页接口调用函数】;
 * @returns {function} 【handleSearch -- 搜索函数】;
 * @returns {function} 【handleExport -- 导出-暂未测试】;
 * @returns {function} 【handleSelectionChange -- 多选触发函数】;
 * @returns {function} 【handleDelete -- ({id:{array | string},y_delece_type:{string},prop:{string}}) 删除函数(id:删除的id,有传id的情况下为单选。没传id为默认表格复选数组,y_delece_type:接口接收类型为字符或者数组,prop:匹配字段名) - 支持多选与单选】;
 * @example
 const {
  tableData,
  loading,
  pagination,
  total,
  getData,
  handleSearch,
  handleExport,
  handleDelete,
  handleSelectionChange,
  multipleSelection
} = useTable({loadDataFunc:pageList, queryForm:queryParams, deleteDataFunc:{},options:{apiConfig:{
  dataProp:'rows',totalProp:'total'
},pageSizeConfig:{
 table_page:'page',
 table_sizeNum:20
}}})
 * @Date:2024:07:04 18:16:00
 * @LastEditTime:2024:07:08 23:47:00
 * @Author: Lanky
 * */
export function useTable(config) {
    const {loadDataFunc,queryForm,deleteDataFunc,options = {
        immediate:true
    }} = config
    const {
        pageSizeConfig={},
        apiConfig = {}
    } = options
    let {table_page = 'pageNum',table_pageNum = 1,table_size = 'pageSize',table_sizeNum=10} = pageSizeConfig
    let {dataProp='list',totalProp = 'total'} = apiConfig
    let loading = ref(true)
    let tableData = ref()
    let total = ref(0)
    const pagination = reactive({
        [table_page]: table_pageNum,
        [table_size]: table_sizeNum
    })
    const getData = async () => {
        loading.value = true
        const res = await loadDataFunc({ ...queryForm, ...pagination })
        tableData.value = res.list || res[dataProp] || res.data && res.data[dataProp] || res.rows && res.rows[dataProp] || []
        total.value = res.total || res[totalProp] || 0
        loading.value = false
    }

    onMounted(() => {
        if (options?.immediate === undefined || options?.immediate === true) getData()
    })

    // 搜索
    const handleSearch = () => {
        table_page = 1
        getData()
    }

    // 切换页码
    const handlePageChange = (val) => {
        const {page,size} = val
        table_page = page
        table_size = size
        getData()
    }

    let multipleSelection = ref([])
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }

    // 单个删除、批量删除
    const handleDelete = ({id,y_delece_type = 'string',prop='id'}) => {
        let ids = [] || null
        let arr = multipleSelection.value.map(i => i[prop])
        if (id !== undefined) {
            y_delece_type === 'string' ? ids = ids : ids = [id]
        } else {
            y_delece_type === 'string' ? ids = arr.join(',') : ids = arr
        }
        if (!ids || ids.length === 0) {
            ElMessage.warning('请选择需要删除的数据！')
            return
        }
        ElMessageBox.confirm('确定删除？此操作不可恢复。', '提示', {
            type: 'warning'
        })
            .then(async () => {
                await deleteDataFunc(ids)

                ElMessage.success('删除成功')
                getData()
            })
            .catch((err) => {
                return err
            })
    }

    // 导出表格数据
    const handleExport = () => {
        ElMessageBox.confirm('确定导出所选数据？', '提示')
            .then(() => {
                ElNotification({
                    title: '数据导出',
                    message: '正在为您导出数据，请稍后',
                    position: 'bottom-right'
                })
            })
            .catch((err) => { return err })
    }

    return {
        loading,
        tableData,
        total,
        pagination,
        multipleSelection,
        getData,
        handleSearch,
        handleExport,
        handleSelectionChange,
        handlePageChange,
        handleDelete
    }
}