vue3.2+element-plus+ts节假日管理界面

以下是一个简单的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是模拟的，需要根据实际需求实现具体的编辑和删除逻辑。