vue3 el-tale封装（编辑、删除、查看详情按钮一起封装）

template>
  el-table :data="tableData" style="width: 100%">
    el-table-column
      v-for="(column, index) in tableDataHeader"
      :label="column.label"
      :key="index"
      :prop="column.prop"
      :width="column.width"
    >
      template #default="scope" v-if="column.operate">
        el-button
          v-for="item in column.children"
          :key="item.prop"
          :type="item.type"
          @click="btnClick(item.method, scope.row, scope.$index)"
          >{{ item.label }}/el-button
        >
      /template>
    /el-table-column>
  /el-table>
/template>

script setup lang="ts">
const props = defineProps{
  tableData: Arrayany>
  tableDataHeader: Arrayany>
}>()

const emits = defineEmits(['deleteRow', 'editRow', 'detailRow'])

const btnClick = (method, row, index) => {
  console.log('method:', method)
  emits(method, row, index)
}
/script>

style scoped>/style>

template>
  CustomTable
    :tableData="tableData"
    :tableDataHeader="tableDataHeader"
    @deleteRow="deleteRow"
    @editRow="edit"
    @detailRow="detail"
  >
  /CustomTable>
/template>

script setup lang="ts">
import { onMounted, reactive, ref, type Ref } from 'vue'
import CustomTable from '@/components/Custom-table.vue'
import { data } from '@/data/data.ts'

const tableData: RefArray> = ref(data.tableData)
const tableDataHeader = ref(data.tableDataHeader)

const deleteRow = (row: any, index: number) => {
  tableData.value.splice(index, 1)
  console.log('this tableData:', tableData)
  pagenation.value.total = tableData.value.length
}
const edit = (row, index) => {
  console.log('row:', row, index)
}
const detail = (row, index) => {
  console.log('row:', row, index)
}
/script>

style scoped>/style>

对应的 tableData 和 tableDataHeader 文件（实际开发中，应该从后端拿 tableData，tableHeader 根据情况自定义）

export const data = {
  tableData: [
    {
      name: 'knife1',
      date: '2024-09-22',
      type: 'butterfly'
    },
    {
      name: 'knife2',
      date: '2024-09-22',
      type: 'M9'
    },
    {
      name: 'knife3',
      date: '2024-09-22',
      type: 'butterfly'
    }
  ],
  tableDataHeader: [
    {
      label: 'Knife Name',
      prop: 'name',
      width: 180
    },
    {
      label: 'Favorite Date',
      prop: 'date',
      width: 180
    },
    {
      label: 'Knife Type',
      prop: 'type',
      width: 180
    },
    {
      label: 'Operation',
      operate: true,
      prop: 'Operation',
      width: '280',
      children: [
        {
          label: 'edit',
          prop: 'edit',
          method: 'editRow',
          type: 'primary'
        },
        {
          label: 'Delete',
          prop: 'Delete',
          method: 'deleteRow',
          type: 'warning'
        },
        {
          label: 'Detail',
          prop: 'Detail',
          method: 'detailRow',
          type: 'info'
        }
      ]
    }
  ]
}