avue 自定义表单插槽

### Avue 弹窗表单插槽使用方法 在 Avue 中，通过 `slot` 可以自定义弹窗中的内容。对于复杂的业务场景，比如需要嵌入表单或其他组件时，这种方式非常有用。 #### 定义表格配置项 首先，在数据列表页面中定义好表格的基础配置选项，包括列字段、按钮等设置： ```javascript data() { return { tableOption: { column: [ { label: '书名', prop: 'name' }, { label: '作者', prop: 'author' } ], menuBtn: true, addBtn: false, // 不显示默认新增按钮 editBtn: false, // 不显示默认编辑按钮 delBtn: false // 不显示默认删除按钮 } }; } ``` #### 添加菜单操作栏 接着为每行记录增加额外的操作按钮用于触发弹窗展示，这里假设是修改功能： ```html <avue-crud :option="tableOption" @row-update="handleRowUpdate"> <!-- 自定义更新按钮 --> <template slot-scope="{ row }" slot="menu"> <el-button type="text" size="small" @click.stop="openEditForm(row)">编辑</el-button> </template> </avue-crud> ``` #### 实现打开编辑窗口的方法 编写 JavaScript 方法来控制弹窗的状态以及传递当前选中行的数据给子组件： ```javascript methods: { openEditForm(row) { this.$refs.editDialog.open(); this.currentRow = Object.assign({}, row); }, handleRowUpdate({ index, done }) { setTimeout(() => { done(); // 关闭加载状态 }, 500); } } ``` #### 创建独立的 Dialog 组件 创建一个新的 Vue 文件作为专门处理书籍信息维护工作的对话框组件 EditBook.vue ，其中包含完整的表单项布局结构： ```vue <!-- EditBook.vue --> <template> <div class="edit-book-dialog"> <el-form ref="formRef" :model="formData" status-icon :rules="rules"> <el-form-item label="书名" prop="name"> <el-input v-model.trim="formData.name"></el-input> </el-form-item> <el-form-item label="作者" prop="author"> <el-input v-model.trim="formData.author"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="$emit('close')">取 消</el-button> <el-button type="primary" @click="submit">确 定</el-button> </span> </div> </template> <script> export default { props: ['visible'], data () { return { formData: {}, rules: { name: [{ required: true, message: '请输入书名', trigger: 'blur' }], author: [{ required: true, message: '请输入作者姓名', trigger: 'change' }] } } }, methods: { submit() { this.$refs.formRef.validate((valid) => { if (valid) { alert('提交成功!'); this.$emit('update'); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` #### 将 Dialog 集成回父级视图 最后回到最初的那个页面文件里引入并注册这个新组建，并利用 `<component>` 动态渲染标签配合 `is` 属性指定要实例化的具体类名完成最终效果呈现[^1]： ```html <template> ... <component is="EditBook" ref="editDialog" :visible.sync="showEditDialog" @update="fetchData()" @close="showEditDialog=false"/> ... </template> <script> import EditBook from './components/EditBook'; export default { components: { EditBook }, data(){ return{ showEditDialog:false, currentRow:{}, ... } }, ... } </script> ```

在Vue.js框架的Avue 3库中，如果你想通过自定义表单插槽(Slot)传递数据，特别是像表格行(row)这样的数据，你可以按照以下步骤操作： 1. 首先，在你的组件模板中，创建一个用于放置自定义内容的表单字段，通常会使用`<template slot="custom-slot">...</template>`标签。 ```html <template> <div> <form @submit.prevent="submitForm"> <!-- 其他表单元素... --> <template v-slot:custom-slot> <div v-for="(row, index) in rows" :key="index"> <slot name="row-item" :row="row"></slot> </div> </template> <!-- 提交按钮等... --> </form> </div> </template> ``` 2. 然后，在需要插入自定义内容的地方，定义一个`row-item`插槽，并接受`row`作为参数： ```html <!-- 子组件 --> <child-form @passRowData="handleRowData"> <!-- 这里使用 slot="row-item" 指定插槽名 --> <template slot="row-item"> <div> <label>Column 1: {{ row.column1 }}</label> <!-- 更多关于row的数据展示... --> </div> </template> </child-form> ``` 3. 容器组件中，当需要传递数据到子组件时，可以触发一个自定义事件，比如`passRowData`，并传入相应的行数据： ```javascript methods: { handleRowData(row) { this.$refs.childForm.passRowData(row); }, // 其他表单提交处理... } ``` 4. 最后，在子组件内部接收这个事件，将`row`数据绑定到插槽上： ```javascript export default { methods: { // 接收外部传递的row数据 passRowData(row) { this.$emit('row-data-received', row); } }, // ... } ``` 现在当你提交表单时，容器组件可以处理来自子组件的自定义行数据。