vue3在页面显示一个加号，点击后出现dialog对话窗口，窗口用from内实现1.输入金额 2.选择金额的分类，可选项有：餐饮、交通、游玩、住房、其他 3.选择时间 4.备注 5.取消，点击后关闭dialog 6.完成，完成后将输入的数据用table显示在页面上

以下是一个简单的实现：

<template>
  <div>
    <button @click="showDialog">+</button>
    <div v-if="dialogVisible">
      <form @submit.prevent="submitForm">
        <label>
          金额：
          <input type="number" v-model="amount" required>
        </label>
        <label>
          分类：
          <select v-model="category" required>
            <option value="餐饮">餐饮</option>
            <option value="交通">交通</option>
            <option value="游玩">游玩</option>
            <option value="住房">住房</option>
            <option value="其他">其他</option>
          </select>
        </label>
        <label>
          时间：
          <input type="datetime-local" v-model="time" required>
        </label>
        <label>
          备注：
          <textarea v-model="remark"></textarea>
        </label>
        <button type="button" @click="closeDialog">取消</button>
        <button type="submit">完成</button>
      </form>
    </div>
    <table>
      <thead>
        <tr>
          <th>金额</th>
          <th>分类</th>
          <th>时间</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.amount }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.time }}</td>
          <td>{{ item.remark }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const dialogVisible = ref(false);
    const amount = ref("");
    const category = ref("");
    const time = ref("");
    const remark = ref("");
    const items = ref([]);

    const showDialog = () => {
      dialogVisible.value = true;
    };

    const closeDialog = () => {
      dialogVisible.value = false;
      amount.value = "";
      category.value = "";
      time.value = "";
      remark.value = "";
    };

    const submitForm = () => {
      items.value.push({
        amount: amount.value,
        category: category.value,
        time: time.value,
        remark: remark.value
      });
      closeDialog();
    };

    return {
      dialogVisible,
      amount,
      category,
      time,
      remark,
      items,
      showDialog,
      closeDialog,
      submitForm
    };
  }
};
</script>

这个组件使用了Vue 3的Composition API，通过`ref`创建了一些响应式的变量。当点击加号按钮时，会显示dialog窗口。dialog窗口中的表单使用了HTML5的表单元素，包括`input`、`select`和`textarea`，并通过`v-model`绑定到对应的变量上。在表单中提交时，将数据添加到`items`数组中，同时关闭dialog窗口。最后，通过`v-for`将`items`数组中的数据渲染到表格中。