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

 elementui-table封装 hooks

js-hooks

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 -- 删除函数】;
 * @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
    })
    /**
     * @deprecated: 列表接口函数
     * @function: getData()
     * */
    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()
    })

    /**
     * @deprecated: 搜索函数
     * @function: handleSearch(val)
     * */
    const handleSearch = () => {
        table_page = 1
        getData()
    }

    /**
     * @deprecated: 分页函数
     * @function: handlePageChange(val)
     * @param {object} val 页码对象
     * @param {number} val.page 页数
     * @param {number} val.size 页码
     * */
    const handlePageChange = (val) => {
        const {page,size} = val
        table_page = page
        table_size = size
        getData()
    }

    let multipleSelection = ref([])
    /**
     * @deprecated: 表格多选框
     * @function: handleSelectionChange(val)
     * @param {object} val 复选框选中的值
     * */
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }

    /**
     * @deprecated: 单个删除 | 批量删除
     * @function: handleDelete(config)
     * @param {object} config 配置对象
     * @param {string | array} config.id 删除的id 不传时默认为表格复选框批量删除
     * @param {string} config.y_delece_type 接口接收的参数类型为 'string' | 'array'
     * @example
     * handleDelete({y_delece_type: 'string'}) || handleDelete({id:row.id,y_delece_type:'string'})
     * */
    const handleDelete = ({id,y_delece_type = 'string',prop='id'}) => {
        let ids = [] || null
        let arr = multipleSelection.value.map(i => i[prop])
        console.log(id,'id')
        if (id !== undefined) {
            y_delece_type === 'string' ? ids = id : 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
            })
    }

    /**
     * @deprecated: 导出函数 - 暂未测试或未实现先放着
     * @function: handleExport()
     * */
    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
    }
}

 使用示例

script

template