Vue3+TS项目封装一个公共的el-table组件二次封装

前言

支持动态传入列，列内容可以指定插槽，指定格式化显示

样式没太写，主要分享基础功能封装

效果

Table组件代码BaseTable.vue

<template>
  <el-table :data="data" border>
    <template v-for="col in columns" :key="col.prop">
      <el-table-column :prop="col.prop" :label="col.label" :width="col.width" show-overflow-tooltip>
        <template #default="{ row }">
          <slot v-if="col.slot" :name="col.slot"></slot>
          <!-- 因为这个内容不是通过表格的prop直接绑定的，所以表格自带的溢出省略号失效，自己写下 -->
          <div v-else class="text-overflow">{
  { getFormatter(col, row[col.prop]) }}</div>
        </template>
      </el-table-column>