vue3+element-plus的table封装

//只写了最基础的
import { defineComponent, toRefs, PropType } from "vue";
type slotFunction = (scope: Record<string, unknown>) => JSX.Element;
interface TableConfig {
  props?: Record<string, unknown>; //el-table-column props
  header?: slotFunction;
  default?: slotFunction;
}

export default defineComponent({
  name: "mytable",
  props: {
    configs: {
      type: Array as PropType<TableConfig[]>,
      required: true,
    },
  },
  setup(props, { attrs, slots }) {
    // 注意：在vue3中 $listener仅是以on开头的attrs
    const { configs } = toRefs(props);
    const columns = configs.value.map((item) => {
      const slots = { ...item };
      delete slots.props;
      return (
        <el-table-column {...item.props} v-slots={slots}></el-table-column>
      );
    });
    return () => (
      <el-table {...attrs} v-slots={{ ...slots, default: columns }}></el-table>
    );
  },
});

//示例
<template>
  <tableCom
    :configs="configs"
    :data="tableDate"
    @cell-mouse-enter="mouseEnter"
    @selection-change="handleSelectionChange"
    >>
    <template #append
      ><p style="text-align: center; line-height: 50px" v-loading="loading">
        <a href="javascript:;" class="blue01">点击加载更多</a>
      </p>
    </template>
  </tableCom>
</template>

<script lang="ts">
import tableCom from "@/components/my-table";
import _configs from "./tables";
import { ref, defineComponent } from "vue";
console.log("_configs:", _configs);
export default defineComponent({
  components: { tableCom },
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  setup() {
    const multipleSelection = ref<InstanceType<typeof Array>>([]);
    const handleEdit = () => {
      console.log("handleEdit");
    };
    const handleSelectionChange = (val: Array<unknown>): void => {
      console.log("handleSelectionChange");
      multipleSelection.value = val;
    };
    const configs = _configs({ handleEdit, handleSelectionChange });

    const tableDate = ref([
      {
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      },
      {
        date: "2016-05-04",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1517 弄",
      },
      {
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1519 弄",
      },
      {
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄",
      },
    ]);
    setTimeout(() => {
      tableDate.value = [
        {
          date: "2016-05-02",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ];
    }, 1000);
    const mouseEnter = () => {
      console.log("mouseEnter");
    };
    return {
      configs,
      tableDate,
      mouseEnter,
      handleSelectionChange,
    };
  },
});
</script>

<style></style>

//table.tsx
import { TableConfig } from "@/components/my-table/index";
interface vm {
  [propertys: string]: (arg: any) => any;
}
export default function (vm: vm): TableConfig[] {
  return [
    {
      props: {
        type: "selection",
        width: "55",
      },
    },
    {
      props: { prop: "date", label: "商品ID" },
    },
    {
      props: {
        prop: "name",
        label: "商品",
      },
    },
    {
      props: {
        prop: "anctions",
        label: "操作",
      },
      header: (scope) => {
        console.log(scope);
        return <>haha</>;
      },
      default: (scope) => {
        console.log(scope);
        const editButton = () => {
          //编辑

          vm.handleEdit(scope.row.id);
        };
        const deleteButton = () => {
          vm.deleteShop(scope.row.id);
        };

        return (
          <el-row>
            <el-button size="mini" onClick={editButton}>
              编辑
            </el-button>
            <el-button size="mini" onClick={deleteButton}>
              删除
            </el-button>
          </el-row>
        );
      },
    },
  ];
}