vue3+el-table封装示例详解(编辑、删除、查看详情按钮一起封装)

// 封装源码（子组件）
<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: Array<any>
  tableDataHeader: Array<any>
}>()
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: Ref<Array> = 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>

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'
        }
      ]
    }
  ]
}