Vue 3 使用 TypeScript 和 Element Plus 创建表格并添加按钮 (增加、修改、删除)

<p>&quot;<template>\n  <div>\n    &lt;el-button type=&quot;primary&quot; @click=&quot;addPlan&quot;&gt;增加</el-button>\n    &lt;el-button type=&quot;primary&quot; @click=&quot;editPlan&quot;&gt;修改</el-button>\n    &lt;el-button type=&quot;primary&quot; @click=&quot;deletePlan&quot;&gt;删除</el-button>\n\n    &lt;el-table :data=&quot;plans&quot; style=&quot;width: 100%&quot;&gt;\n      &lt;el-table-column prop=&quot;name&quot; label=&quot;计划名称&quot;&gt;</el-table-column>\n      &lt;el-table-column prop=&quot;completionTime&quot; label=&quot;完成时间&quot;&gt;</el-table-column>\n      &lt;el-table-column prop=&quot;status&quot; label=&quot;推送状态&quot;&gt;</el-table-column>\n    </el-table>\n  </div>\n</template>\n\n&lt;script lang=&quot;ts&quot;&gt;\nimport { defineComponent, reactive } from 'vue';\n\nexport default defineComponent({\n  name: 'PlanTable',\n  data() {\n    return {\n      plans: reactive([\n        { name: '计划1', completionTime: '2022-01-01', status: '已推送' },\n        { name: '计划2', completionTime: '2022-02-01', status: '未推送' },\n        { name: '计划3', completionTime: '2022-03-01', status: '已推送' },\n      ]),\n    };\n  },\n  methods: {\n    addPlan() {\n      // 实现增加计划的逻辑\n    },\n    editPlan() {\n      // 实现修改计划的逻辑\n    },\n    deletePlan() {\n      // 实现删除计划的逻辑\n    },\n  },\n});\n</script>\n\n<style>\n/* 可以添加自定义样式 */\n</style>\n&quot; 在上面的示例中，我们使用<code>el-table</code>组件创建了一个表格，并通过<code>el-table-column</code>组件定义了三个列。我们使用<code>reactive</code>函数将<code>plans</code>数组转化为响应式对象，以便在增加、修改、删除计划时能够自动更新表格。\n\n在<code>methods</code>中，我们定义了三个方法<code>addPlan</code>、<code>editPlan</code>和<code>deletePlan</code>，你可以根据实际需求实现这些方法的逻辑。在这些方法中，你可以通过操作<code>plans</code>数组来增加、修改或删除计划。\n\n请注意，这只是一个示例代码，你可能需要根据实际情况进行修改和调整。同时，你还需要引入Vue 3和Element Plus库，并在适当的位置使用<code>&lt;plan-table&gt;&lt;/plan-table&gt;</code>标签来使用这个组件。</p>