vue3.0 + elementUI 公共组件表格(二次封装)_vue3表格组件

 vue3.0基于elementUI 和 ts 的基础上对表格进行简单的封装，只是为了展示如何来简单的表格封装自定义，组件并不是很完美，后面根据自己的需求在进行完善!

组件的使用：

 <table-info 
     :tableLabel="tableLabel2"
     :tableData="tableData2"
  >
     <template #matchingResult="{ row }">
         <!-- #matchingResult 是列表中自定义的名字 通过这种方式来自定义表格中的内容  -->
        <p :class="{icon: true, 
              icon_green: row.matchingResult == 0,
              icon_red: row.matchingResult == 1}"></p>
     </template>
     <template #StateSort="{ row }">
         <span :class="{ optSpan: row.matchingResult == 0 }"
                @click="infoBtnFn(row)">
              {{ row.matchingResult == 0 ? "详情查看" : "无主体对象" }}
         </span>
     </template>
</table-info>

  // 表格键名和类型对应数组
      tableLabel2: [
        {
          label: "序号",
          type: "seq",
          width: 60,
        },
        {
          label: "对象本体",
          keyName: "ObjOntology",
          // sortable: true, // 排序
        },
        {
          label: "对比对象",
          keyName: "comparisonObj",
        },
        {
          label: "匹配结果",
          type: "custom", // custom 自定义
          name: "matchingResult",
        },
        {
          label: "操作",
          type: "custom", // custom 自定义
          name: "StateSort",
        },
      ],
      // 表格数据
      tableData2: [
        {
          id: "01",
          ObjOntology: "AAA表",
          comparisonObj: "AAA表",
          matchingResult: 0,
        },
        {
          id: "02",
          ObjOntology: "BBB表",
          comparisonObj:"BBB表" ,
          matchingResult: 0,
        },
        {
          id: "03",
          ObjOntology: "CCC表",
          comparisonObj: "CCC表",
          matchingResult: 1,
        },
        {
          id: "04",
          ObjOntology: "******",
          comparisonObj: "******",
          matchingResult: 1,
        },
        {
          id: "05",
          ObjOntology: "******",
          comparisonObj: "******",
          matchingResult: 0,
        }
      ],

组件代码

<!-- 普通简单表格 -->
<template>
  <div class="panelTable">
    <el-table
      :style="{ width: '100%' }"
      :data="tableData"
      stripe
      height="100%"
      v-loading="loading"
      element-loading-text="加载中…"
      :default-sort="{ prop: '', order: 'descending' }"
    > 
      <template v-for="(item, index) in tableLabel">
        <el-table-column
          v-if="item.type == 'seq'"
          :key="item.type"
          label="序号"
          :fixed="item.fixed"
          align="center"
          :width="item.width"
        >
          <template #default="scope">
            <span v-if="pageIndex && page.size">{{
              scope.$index + (pageIndex - 1) * page.size + 1
            }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'custom'"
          :key="item.name"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :sortable="item.sortable"
          :width="item.width"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <slot :name="item.name" :row="scope.row" :index="index + 1"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :fixed="item.fixed"
          :prop="item.keyName"
          :label="item.label"
          align="center"
          :sortable="item.sortable"
          :width="item.width"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </template>
    </el-table>
    <div class="panelPage">
      <el-pagination
        v-if="page.size"
        background
        layout="->,total,prev, pager, next"
        :total="page.total"
        :page-size="page.size"
        :current-page="page.currentPage"
        @current-change="pageChangeHandle"
      />
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, toRefs, reactive, onMounted, watch } from "vue";
 
export default defineComponent({
  name: "SimpleTable",
  props: {
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    page: {
      type: Object,
      default: () => {
        return {
            size: 15,
            currentPage: 1,
            total: 0
         };
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    wrapperHeight: {
      type: String,
      default: "100%",
    },
  },
  setup(props, { emit }) {
    // 数据
    const state = reactive({
      pageIndex: 0,
    });
 
    // 方法
    const methods = reactive({
      // 点击分页
      pageChangeHandle(val: number) {
        state.pageIndex = val;
        emit("pageChange", val);
      },
    });
 
    return {
      ...toRefs(state),
      ...toRefs(methods),
    };
  },
});
</script>
 
<style lang="scss" scoped>
</style>