vue3+elementPlus+js封装常规的table表格加分页组件

封的子组件proTable组件：

<template>
  <div>
    <el-table :data="tableData" stripe empty-text="暂无数据" @selection-change="handleSelection">
      <el-table-column type="selection" width="100" v-if="isMoreSelect" align="center" />
      <el-table-column v-for="col, i in tableHeader" :prop="col.props" :key="i" :label="col.label"
        :width="col.width || 'auto'" align="center">
        <template #default="{ row }">
          <!-- 自定义内容 -->
          <slot :rows="row" :cols="col"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 15px"></div>
    <el-row justify="end">
      <el-pagination v-show="totalNum > 0" @size-change="sizeChange" @current-change="currentChange"
        v-model:current-page.sync="currentPage" :page-sizes="[5, 10, 20, 30]" v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background>
      </el-pagination>
    </el-row>
  </div>
</template>
<script setup  name="Table">
const props = defineProps({
  //  表头
  tableHeader: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  //是否多选显示
  isMoreSelect: {
    type: Boolean,
    default: false,
  },
  // 当前页
  currentPage: {
    type: Number,
    default: 0,
  },
  // 展示页数
  pageSize: {
    type: Number,
    default: 0,
  },
  //总页数
  totalNum: {
    type: Number,
    default: 0,
  },
  // 改变每页展示页数
  sizeChange: {
    type: Function,
    default: () => { },
  },
  // 改变页码
  currentChange: {
    type: Function,
    default: () => { },
  },
  //多选
  handleSelection: {
    type: Function,
    default: () => { },
  }
});
</script>

<style scoped lang="scss"></style>

父组件进行使用

<template>
  <proTable :tableHeader="tableHeaderData" :handleSelection="handleSelectionChange" :isMoreSelect="true"
    :tableData="tableList" :currentChange="handleCurrentChange" :sizeChange="handleSizeChange" :pageSize="pageSizes"
    :currentPage="currentPages" :totalNum="total">
    <template v-slot:default="{ rows, cols }">
      <!-- 显示其他内容 -->
      <span v-show="!['状态'].includes(cols.label)"> {{ rows[cols.props] }} </span>
      <!-- 过滤一些内容-->
      <el-tag v-show="cols.label == '状态'" :type="rows.status == 1 ? 'danger' : ''">{{ rows.status == 1 ? '停用' : '正常'
      }}</el-tag>
      <div v-show="cols.label == '操作'">
        <el-button size="small" type="primary" @click=editWorkshopFn(rows) text :icon="Edit">编辑</el-button>
        <el-button size="small" type="danger" text :icon="Delete" @click="deleteBtn(rows)">删除</el-button>
      </div>
    </template>
  </proTable>
</template>

<script setup >
import { Delete, Edit } from '@element-plus/icons-vue'
import { getWorkshopPage, deleteWorkshop } from '@/api/factory/workshop'
import proTable from '@/components/proTable/index.vue'
const tableList = ref([])

const tableHeaderData = [
  {
    label: '序号',
    props: 'sort'
  },
  {
    label: '车间名称',
    props: 'workshopName'
  },
  {
    label: '所属部门',
    props: 'deptName'
  },
  {
    label: '状态',
    props: 'status'
  },
  {
    label: '创建时间',
    props: 'createTime'
  },
  {
    label: '备注',
    props: 'remark'
  },
  {
    label: '操作',
    props: 'controls'
  }

]
const total = ref(0);
const currentPages = ref(1)
const pageSizes = ref(10)

onMounted(() => {
  //初始化
  getWorkshopPageFn()
})

// 选择
const handleSelectionChange = (val) => {
  console.log('多选', val)
}

// 删除按钮
const deleteBtn = async (row) => {
  console.log('删除', row)
  await useHandleData(deleteWorkshop, row.workshopId)   //deleteWorkshop为接口， row.workshopId为接口参数
  getWorkshopPageFn()
}

// 编辑按钮
const editWorkshopFn = async (row) => {
  console.log('编辑', row)
}

//分页方法
const getWorkshopPageFn = async () => {
  //调接口拿数据
  let res = await getWorkshopPage(
    {
      pageNum: currentPages.value,
      pageSize: pageSizes.value,
    })
  total.value = res.total
  tableList.value = res.rows
}

//分页相关按钮
const handleSizeChange = (page) => {
  pageSizes.value = page
  getWorkshopPageFn()
}
const handleCurrentChange = (page) => {
  currentPages.value = page
  getWorkshopPageFn()
}
</script>

 效果如下：

 

后台项目中table表格中经常有删除、重置修改等按钮，有时需要给个提示，需要确认再进行这个动作，一直使用。elementplus中提供了ElMessageBox, ElMessage，但是直接使用太繁琐，行数太多，直接封装一个函数，调用即可！

封装useHandleData函数

import { ElMessageBox, ElMessage,ElLoading } from 'element-plus';

//全局loading效果
const openFullLoading=()=>{
  const fullLoading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  }) 
  return fullLoading
}

export const useHandleData = (api, params = {}, message='删除', confirmType = 'warning') => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm(`是否${message}此数据?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: confirmType,
      draggable: true
    }).then(async () => {
      try {
        openFullLoading()
       await api(params);
        ElMessage({
          type: 'success',
          message: `${message}成功!`
        });
      } finally{
        openFullLoading().close()
      }
      resolve(true);
    });
  });
};

一行使用

import proTable from '@/components/proTable/index.vue'
// 删除按钮
const deleteBtn = async (row) => {
  await useHandleData(deleteWorkshop, row.workshopId)   //deleteWorkshop为接口， row.workshopId为接口参数
}