vue3+element-plus封装表格

1.封装表格 

封装的表格如何使用插槽可以到这参考

vue3封装element plus表格使用插槽_小了黑了兔~的博客-CSDN博客

<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      fit
      show-header
      border
      highlight-current-row
      :max-height="maxHeight"
    >
      <!-- 表格头部 -->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :type="item.type"
        :prop="item.prop"
        align="center"
        :label="item.label"
        :min-width="item.minHeight"
      >
        <!-- 这里的template是否需要根据使用页面传过来的布尔值来判断 -->
        <template v-if="item.template" #default="scope">
          <!-- 插槽 -->
          <slot v-if="item.slot" :name="item.slot" :scopeData="scope"> </slot>
          <div v-if="item.btn">
            <!-- //操作栏的按钮判断 -->
            <el-button
              v-for="(k, index) in item.btn"
              :key="index"
              :type="tableBtns"
              :size="large"
              :style="k.btnStyle"
              @click="k.func(scope.$index, scope.row)"
            >
              {{ k.name }}</el-button
            >
          </div>
          <div v-if="item.switch">
            <el-switch
              v-model="scope.row.isDisabled"
              :active-text="item.switch.activeText"
              :inactive-text="item.switch.inactiveText"
              :active-value="item.switch.activeValue"
              :inactive-value="item.switch.inactiveValue"
              inline-prompt
              @change="item.switch.fn(scope.$index, scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBox" />
    <!-- 分页 -->
    <el-pagination
      v-if="total > 10"
      background
      :current-page="currentpage"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      :page-size="pagesize"
      :layout="layout"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { Search, Delete, Edit } from "@element-plus/icons";

import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
export default defineComponent({
  name: "ikechen-table",
  components: { Search },
  props: {
    tableData: { type: Array, default: [] },
    tableHeader: Array,
    listLoading: Boolean,
    maxHeight: String,
    pagesize: { type: [Number, String], default: 10 }, //一页多少条
    currentpage: { type: [Number, String], default: 1 }, //当前页
    total: Number | String, //总页数
    options: Object, // 分页发生变化赋值给options
    render: Function, // render函数跳转触发请求  使用页面会根据render函数绑定要使用的方法
    layout: {
      type: String,
      default: "total,prev, pager, next",
    },
    tableBtns: {
      type: String,
      default: "text",
    },
    btnStyle: {
      type: String,
      default: " ",
    },
  },
  setup(props, { emit }) {
    const methods = {
      // 分页导航
      handlePageChange(val) {
        // 赋值页数
        emit("handlePageChange", val);
      },
      //切换分页条数
      handleSizeChange(value) {
        // 赋值条数
        emit("handleSizeChange", value);
      },
    };
    onMounted(() => {});
    return {
      ...methods,
    };
  },
});
</script>

<style scoped>
.pageBox {
  margin-top: 20px;
}
</style>

2.使用

<baseTable
      :model="modelSwitch"
      :tableData="tableData"
      :tableHeader="tableHeader"
      :listLoading="listLoading"
      :maxHeight="maxHeight"
      :total="tablePagination.pageTotal"
      :pagesize="tablePagination.PageSize"
      :currentpage="tablePagination.PageIndex"
      :layout="layout"
      :btnStyle="btnStyle"
      @switchChange="switchChange"
      @handlePageChange="handlePageChange"
    >

定义表头信息和表格里的方法使用

     // 表格
      tableHeader: [
        
        {
          prop: "name",
          label: "名称",
        },
        {
          prop: "type",
          label: "科室类型",
          slot: "ksType",//定义插槽名称可自定义
          template: true,//确认使用插槽时给布尔值
        },
        
        {
          prop: "isDisabled",
          label: "是否禁用",
          template: true,
          switch: {
            activeText: "是",
            inactiveText: "否",
            activeValue: 0,
            inactiveValue: 1,
            fn: (index, row) => methods.switchChange(index, row),
          },
        },
        {
          prop: "btn",
          label: "操作",
          template: true,
          btn: [
            {
              name: "编辑",
              func: (index, row) => {
                methods.handleEdit(index, row);
              },
            },
            {
              name: "删除",
              btnStyle: "color:red",
              func: (index, row) => {
                methods.handleDelet(index, row);
              },
            },
          ],
        },
      ],