avue的crud 新增插槽用法

`Avue.js` 是一个基于 Vue 的轻量级前端框架，它提供了一套简洁易用的 UI 组件和路由管理功能。CRUD (Create、Read、Update、Delete) 是数据操作的基本模式，对于表格组件通常会有自动生成新增记录的功能。

在 Avue 中，新增记录通常通过“添加”按钮触发，而在按钮点击事件处理函数中，会插入一个新的数据项到表格的数据源。关于新增插槽（slot）的用法，你可以这样做：

1. 首先，在需要放置新增按钮的表格组件上，定义一个特殊的 slot，例如 `add-slot` 或者 `new-item-slot`：

   <template>
     <div>
       <button @click="handleAdd">添加</button>
       <table>
         <template v-for="(item, index) in items">
           <!-- 表格内容 -->
           <tr slot="add-slot" v-if="!editing && index === 0">
             <!-- 插入新增插槽的内容 -->
           </tr>
           <!-- 编辑状态下的行 -->
           <tr v-if="editing && editingIndex === index">
             <!-- 编辑行内容 -->
           </tr>
         </template>
       </table>
     </div>
   </template>

2. 然后，在插槽中渲染新纪录的表单或者其他所需元素，比如一个空单元格或一个输入框：

   <template slot="add-slot">
     <td class="no-border">
       <input v-model="newItem" placeholder="请输入新记录...">
     </td>
   </template>

3. 当用户提交新数据时（例如表单验证通过），将 `newItem` 赋值给 `items` 数组，并清除新纪录输入字段：

   methods: {
     handleAdd() {
       if (!this.newItem) return;
       this.items.push(this.newItem);
       this.newItem = '';
     }
   }