基于VUE3和element-plus封装表格

封装的表格

<template>
  <div class="common-table">
    <el-table
      ref="tableSortRef"
      style="width: 100%; height: 100%"
      tooltip-effect="dark"
      v-loading="listLoading"
      border
      :data="tableData"
      :height="height"
      @selection-change="setSelectRows"
      @sort-change="tableSortChange"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <!-- 复选列 -->
      <el-table-column
        v-if="selectionIsShow"
        type="selection"
        reserve-selection
        width="55"
      />

      <!-- 序号 -->
      <el-table-column
        v-if="indexIsShow"
        label="序号"
        width="60"
        type="index"
      ></el-table-column>

      <el-table-column
        v-for="(column, index) in tableOption"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :show-overflow-tooltip="overflowTip"
      ></el-table-column>

      <el-table-column
        v-if="showHandleButton"
        fixed="right"
        label="操作"
        :width="handleColWidth"
      >
        <template slot-scope="scope">
          <el-button
            v-if="showHandleEdit"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          ></el-button>

          <el-button
            v-if="showHandleDelete"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          ></el-button>

          <el-button
            v-if="showHandleDetail"
            type="warning"
            @click="handleDetail(scope.row)"
          >
            详情
          </el-button>

          <slot name="customButton" :row="scope.row"></slot>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>

    <div v-if="total > 0" class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :page-size="pageSize"
        :page-sizes="[10,20, 50, 100]"
        :total="parseInt(total)"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
export default defineComponent({
  name: 'ComprehensiveTable',
  components: {},
  props: {
    tableOption: {
      type: Array,
      default: () => {
        return []
      },
    }, //表头

    tableData: {
      type: Array,
      default: () => {
        return []
      },
    }, //表格数据

    showHandleButton: {
      type: Boolean,
      default: false,
    }, //是否显示操作列

    handleColWidth: {
      type: Number,
      default: 200,
    }, //操作列列宽

    height: {
      type: Number,
      default: 650,
    }, //表格高度

    showHandleEdit: {
      type: Boolean,
      default: false,
    }, //编辑按钮

    showHandleDelete: {
      type: Boolean,
      default: false,
    }, //编辑按钮

    showHandleDetail: {
      type: Boolean,
      default: false,
    }, //详情按钮

    selectionIsShow: {
      type: Boolean,
      default: false,
    }, //是否显示多选列

    indexIsShow: {
      type: Boolean,
      default: false,
    }, //是否显示索引列

    overflowTip: {
      type: Boolean,
      default: true,
    }, //超长时是否显示tooltip

    total: {
      type: [String, Number],
      default: 0,
    }, //数据总条数
  },

  setup(props, { emit }) {
    const $baseConfirm = inject('$baseConfirm')
    const state = reactive({
      pageNo: 1,
      pageSize: 10,
    })

    //每页展示条数
    const handleSizeChange = (val) => {
      state.pageSize = val
      emit('handleSizeChange', val)
    }

    //页面展示第几页
    const handleCurrentChange = (val) => {
      state.pageNo = val
      emit('handleCurrentChange', val)
    }

    //删除
    const handleDelete = (row) => {
      $baseConfirm('你确定要删除当前项吗', null, async () => {
        emit('handleDelete', row)
      })
    }

    //详情
    const handleDetail = (row) => {
      emit('handleDetail', row)
    }

    // 编辑
    const handleEdit = (row) => {
      emit('handleEdit', row)
    }

    onBeforeMount(() => {})

    onUnmounted(() => {})

    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      handleEdit,
      handleDelete,
      handleDetail,
    }
  },
})
</script>

<style>
.pagination {
  justify-content: right !important;
  margin-top: 10px;
}
</style>

调用的页面

<template>
  <div class="comprehensive-table-container">
    <packageTable
      :height="650"
      :total="total"
      :tableData="tableData"
      :overflowTip="true"
      :tableOption="tableOption"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></packageTable>
  </div>
</template>

<script>
import { findPage } from '../../api/login'
import packageTable from '../../components/Table/index.vue'

export default defineComponent({
  name: 'ComprehensiveTable',
  components: { packageTable },
  setup() {
    //定义页面所需参数
    const state = reactive({
      tableData: [],
      tableOption: [
        {
          label: 'ID',
          prop: 'id',
        },
        {
          label: '方法',
          prop: 'method',
        },
        {
          label: '参数',
          prop: 'params',
        },
        {
          label: 'IP',
          prop: 'ip',
        },
        {
          label: '耗时',
          prop: 'time',
        },
      ],
      listLoading: true,
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
    })

    //获取表格数据
    const fetchData = async () => {
      const res = await findPage(state.queryForm)
      state.tableData = res.data.content
      state.total = res.data.totalSize
      state.listLoading = false
    }

    //分页获取页面数据
    const handleSizeChange = (val) => {
      state.queryForm.pageSize = val
      fetchData()
    }

    const handleCurrentChange = (val) => {
      state.queryForm.pageNum = val
      fetchData()
    }

    onBeforeMount(() => {})

    onUnmounted(() => {})

    onMounted(() => {
      fetchData()
    })

    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      fetchData,
    }
  },
})
</script>

<style>
.el-pagination {
  justify-content: right !important;
}
</style>

有问题，及时沟通哈，谢谢大家