<template>
	<div class="wrap">
		<div class="handleBtn">
			<el-button type="primary" @click="addItem">新增</el-button>
			<el-button type="primary" @click="copyItem">复制</el-button>
			<el-button type="primary" @click="deletItem">删除</el-button>
			<el-button type="primary" @click="deleteAll">全部删除</el-button>
		</div>
		<div class="tableBox">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="selection" width="48" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column v-for="item in tableColunms" :key="item.label" :label="item.label" :prop="item.prop" />
			</el-table>
		</div>
	</div>
</template>
<script setup lang="ts">
defineProps({
	tableColunms: {
		type: Array as () => Array<{ label: string; prop: string }>,
		default: () => [],
	},
});
const tableData = ref([]);

const addItem = () => {
	tableData.value.push({});
};

const copyItem = () => {
	if (tableData.value.length > 0) {
		const lastItem = tableData.value[tableData.value.length - 1];
		tableData.value.push({ ...lastItem });
	}
};

const deletItem = () => {
	const selectedRows = tableData.value.filter((item: any) => item.selected);
	tableData.value = tableData.value.filter((item: any) => !item.selected);
};

const deleteAll = () => {
	tableData.value = [];
};
</script>
<style lang="scss" scoped></style>
