el-table二次封装

1. component

   可复用组件Table.vue

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(item, index) in realTableHeader"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
    >
      <template v-slot="scope">
        <div v-if="item.dataType == 'option'">
          <el-button
            v-for="(o, key) in item.operation"
            :disabled="o.disabled"
            :key="key"
            :icon="o.icon"
            :plain="o.plain"
            :type="o.type"
            :size="o.size"
            @click="o.clickFun(scope.row)"
          >
            {{ o.name }}
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  tableData: Array,
  tableHeader: Array,
});
// 过滤表头，isShow为false的不需要展示
const realTableHeader = computed(() => {
  return props.tableHeader.filter((item) => item.isShow);
});
</script>

2. 使用组件

在App.vue中使用Table组件

el-table的属性可以直接写在Table标签里

<template>
  <Table border stripe :tableHeader="tableHeader1" :tableData="tableData1" />
  <Table :tableHeader="tableHeader2" :tableData="tableData2" />
</template>

<script setup>
import Table from "@/components/Table.vue";

const tableHeader1 = [
  { prop: "date", label: "日期", isShow: true },
  { prop: "name", label: "姓名", isShow: true },
  { prop: "address", label: "地址", isShow: false },
  {
    prop: "",
    label: "操作",
    isShow: true,
    dataType: "option",
    operation: [
      {
        name: "编辑",
        type: "",
        size: "small",
        icon: "Edit",
        plain: true,
        disabled: false,
        clickFun: (row) => {
          console.log(row);
        },
      },
      {
        name: "删除",
        type: "danger",
        size: "small",
        icon: "Delete",
        plain: true,
        disabled: false,
        clickFun: (row) => {
          console.log(row);
        },
      },
    ],
  },
];
const tableData1 = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const tableHeader2 = [
  { prop: "date", label: "日期", isShow: true },
  { prop: "name", label: "姓名", isShow: true },
  { prop: "state", label: "状态", isShow: true },
  { prop: "city", label: "城市", isShow: true },
  { prop: "address", label: "地址", isShow: true },
  { prop: "zip", label: "zip", isShow: true },
  { prop: "tag", label: "tag", isShow: true },
  {
    prop: "",
    label: "操作",
    isShow: true,
    dataType: "option",
    width: 280,
    operation: [
      {
        name: "编辑",
        type: "primary",
        size: "small",
        icon: "Edit",
        plain: true,
        disabled: false,
        clickFun: (row) => {
          console.log(row);
        },
      },
      {
        name: "删除",
        type: "danger",
        size: "small",
        icon: "Delete",
        plain: true,
        disabled: false,
        clickFun: (row) => {
          console.log(row);
        },
      },
      {
        name: "详情",
        type: "info",
        size: "small",
        icon: "Edit",
        plain: true,
        disabled: false,
        clickFun: (row) => {
          console.log(row);
        },
      },
    ],
  },
];
const tableData2 = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
];
</script>