二次封装element Plus的表格组件

子组件

<template>
  <el-table
    border
    :data="tableData"
    element-loading-text="Loading"
    :header-cell-style="{
      color: '#000000',
    }"
    @selection-change="selectionChange"
  >
    <template v-for="(item, index) in tableHeader" :key="index">
    //表格的多选框
      <el-table-column
        v-if="item.type == 'selection'"
        :type="item.type"
        header-align="left"
      >
      </el-table-column>
   //表格的序号
      <el-table-column
        v-else-if="item.type == 'index'"
        :type="item.type"
        :min-width="item.minHeight"
        width="100"
        :label="item.label"
      >
      </el-table-column>

      <!-- <el-table-column
        v-else-if="item.bindc"
        :prop="item.prop"
        :label="item.label"
      >
      <template #default="scope">{{scope.row}}</template>
      </el-table-column> -->
//按钮，scope.$index很多余，可以不要
      <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width?item.width:auto">
        <template #default="scope">
          <div v-if="item.btn">
            <el-button
              link
              v-for="(k, index) in item.btn"
              :key="index"
              :type="k.type"
              :icon="k.icon"
              size="mini"
              @click="k.func(scope.$index, scope.row)"
              >{{ k.name }}</el-button
            >
          </div>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, reactive, ref } from "vue";
const emits = defineEmits(["selectionChange"]);
const props = defineProps({
  // 表格显示的数据
  tableData: {
    default: () => [],
  },
  // 表头数据
  tableHeader: {
    default: () => [],
  },
});
//表格事件
const selectionChange = (val) => {
  emits("selectionChange", val);
};
</script>

父组件

1.template部分

<CommonTable
      :tableData="tableData"
      :tableHeader="tableHeader"
      @selectionChange="handleSelectionChange"
    ></CommonTable>

2.javascript部分

import CommonTable from "../../../components/CommonTable/index.vue";
import { ref, reactive, toRefs, getCurrentInstance} from "vue";
const state = reactive({
  tableData: [],
  tableHeader: [
    {type: "selection",},
    {type: "index",minHeight: "20px",label: "序号",},
    {prop: "pcMc",label: "批次名称",},
    {prop: "zlMc",label: "种类名称",},
    {prop: "pdxn",label: "评定学年",},
    {prop: "pdxq",label: "评定学期",},
    {prop: "xslb",label: "学生类别",},
    {prop: "ksrq",label: "申请开始日期",},
    {prop: "jsrq",label: "结束日期",},
    {prop: "btn",label: "操作",width: "300",
    btn: [
        {name: "批次分配",func: handleAllocation,type:'primary',icon:'Rank' },
        {name: "编辑",func: handleEdit,type:'primary',icon:'edit' },
        {name: "删除",func: handleDelte,type:'danger',icon:'delete'},
      ],
    },
  ],
});
const { tableData, tableHeader } = toRefs(state);

// 渲染
const requestAPI = () => {
    getHonBatchPag(page.value.pageNo, page.value.pageNum).then((res) => {
    if (res.code == "200") {
      tableData.value = res.data.data;
      total.value = res.data.count;
    }
  });
};
requestAPI();
const ids = ref([]);
/** 选择条数  */
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id);
};

//补充多选框的批量删除-----------------------
function multipleDelCom(){
  if(ids.value.length==0){
    ElMessage({
       type: 'warning',
       message: '请选择要删除的记录',
     })
     return
  }

   ElMessageBox.confirm("您确认要删除吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }
 ).then(function(){
    delHonBatchList(ids.value);
  
   
 }).then(() => {
     ElMessage({
       type: 'success',
       message: '删除成功',
     })
     requestAPI();
   }).catch(() => {
     ElMessage({
       type: 'info',
       message: '已取消',
     })
   })
}