// 封装源码(子组件)
<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>
对应的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'
}
]
}
]
}