以下是一个简单的Vue 3.2、Element Plus和TypeScript结合的节假日管理界面示例代码:
<template>
<el-table :data="holidays" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="节假名称" width="180"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
interface Holiday {
date: string;
name: string;
}
export default defineComponent({
setup() {
const holidays = reactive<Holiday[]>([
{ date: '2023-02-18', name: '春节' },
{ date: '2023-04-05', name: '清明节' },
// ...
]);
const handleEdit = (index: number, row: Holiday) => {
console.log('Edit holiday:', index, row);
// 编辑节假逻辑
};
const handleDelete = (index: number, row: Holiday) => {
console.log('Delete holiday:', index, row);
// 删除节假逻辑
};
return {
holidays,
handleEdit,
handleDelete,
};
},
});
</script>
这个例子中,我们定义了一个简单的Vue组件,使用了Element Plus的<el-table>
组件来展示节假日数据,并包含了添加、编辑和删除操作的按钮。操作方法handleEdit
和handleDelete
是模拟的,需要根据实际需求实现具体的编辑和删除逻辑。