基于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 内部函数配置项(分页-get接口配置)* @param {boolean} config.options.immediate 是否默认执行 onMounted触发* @param {object} config.options.pageSizeConfig 分页字段配置* @param {string} config.options.pageSizeConfig.page 分页字段配置页数* @param {string} config.options.pageSizeConfig.size 分页字段配置页码* @param {object} config.options.apiComfig get接口回调配置* @param {string} config.options.apiConfig.data get接口回调表格值字段名 --- res对象内的字段属性名* @param {string} config.options.apiConfig.total get接口回调总数字段名 --- res对象内的字段属性名* @exampleconst {tableData,loading,pagination,total,getData,handleSearch,handleExport,handleDelete,handleSelectionChange,multipleSelection
} = useTable({loadDataFunc:pageList, queryForm:queryParams, deleteDataFunc:{},options:{apiConfig:{data:'rows',total:'total'
}}})* @Date:2024:07:04 18:16:00* @LastEditTime:2024:07:04 23:47:00* @Author: Lanky* */
export function useTable(config) {const {loadDataFunc,queryForm,deleteDataFunc,options = {immediate:true}} = configconst {pageSizeConfig ={page:'pageNum',size:'pageSize'},apiComfig ={data:'list',total:'total'}} = optionslet loading = ref(true)let tableData = ref()let total = ref(0)const pagination = reactive({[pageSizeConfig.page]: 1,[pageSizeConfig.size]: 20})const getData = async () => {loading.value = trueconst res = await loadDataFunc({ ...queryForm, ...pagination })tableData.value = res.list || res[apiComfig.data] || res.data && res.data[apiComfig.data] || res.rows && res.rows[apiComfig.data] || []total.value = res.total || res[apiComfig.total] || 0loading.value = false}onMounted(() => {if (options?.immediate === undefined || options?.immediate === true) getData()})// 搜索const handleSearch = () => {pagination[pageSizeConfig.page] = 1getData()}// 切换页码const handlePageChange = (val) => {pagination[pageSizeConfig.size] = valgetData()}let multipleSelection = ref([])const handleSelectionChange = (val) => {multipleSelection.value = val}// 单个删除、批量删除const handleDelete = (id) => {let ids = [] || nullif (id !== undefined) {ids = [id]} else {ids = multipleSelection.value}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}
}