基于 Vue3.x + ElementPlus 组件二次封装

1.el-table 的二次封装

1.0.4 更新内容新增表格拖拽事件

使用示例：

<script setup>
import { QZCustomTable } from "qz-custom-table";
import "qz-custom-table/style.css"; // 如果项目中已经引入了element的样式 则此处不需要
const refCustomTable = ref(null);
const tableData = ref([
  {
    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 tableColumns = [
  {
    type: "selection",
  },
  {
    type: "index",
    lebel: "序号",
    width: "100",
  },
  {
    prop: "date",
    label: "日期",
    align: "center",
    width: "160",
  },
  {
    prop: "name",
    label: "名称",
    align: "center",
    width: "160",
  },
  {
    prop: "address",
    label: "地址",
    align: "center",
    width: "320",
  },
];
</script>

<template>
  <QZCustomTable
    ref="refCustomTable"
    class="w-full"
    :data="tableData"
    :columns="tableColumns"
    :draggable="true"
  />
</template>