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

本文主要是介绍vue3+el-tale封装（编辑、删除、查看详情按钮一起封装），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

// 封装源码（子组件）
<template><el-table :data="tableData" style="width: 100%"><el-table-columnv-for="(column, index) in tableDataHeader":label="column.label":key="index":prop="column.prop":width="column.width"><template #default="scope" v-if="column.operate"><el-buttonv-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>

对应的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'}]}]
}