avue 自定义组件

### 如何在 Avue 中创建或使用自定义组件 #### 创建自定义组件 Avue 提供了一个灵活的机制来扩展其功能，允许开发者通过 `column` 属性中的 `component` 字段引入自定义组件。以下是实现这一目标的具体方式： 1. **编写自定义组件** 首先，创建一个标准的 Vue 单文件组件（SFC），类似于普通的 Vue 组件[^1]。 ```vue <!-- CustomInput.vue --> <template> <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> </template> <script> export default { name: "CustomInput", props: ["value"], }; </script> ``` 2. **注册并使用自定义组件** 将该组件注册到项目中，并通过 `avue-crud` 的配置项将其应用到特定列中。 ```javascript // main.js 或者其他入口文件 import Vue from "vue"; import CustomInput from "./components/CustomInput"; Vue.component("custom-input", CustomInput); ``` 3. **配置 avue-crud 的 option 对象** 在 `option.column` 数组中指定某列使用的自定义组件及其参数。 ```javascript data() { return { tableData: [], crudOption: { page: true, column: [ { label: "姓名", prop: "name", component: "custom-input", // 使用自定义组件 span: 24, // 设置宽度比例 }, { label: "年龄", prop: "age", component: "el-input-number", // 可以混合使用内置组件和其他第三方组件 props: { min: 0, max: 150, }, }, ], }, }; } ``` --- #### 示例代码：完整的自定义组件集成流程 以下是一个更复杂的例子，展示如何在一个表单场景下嵌套多个自定义组件。 ```html <template> <div> <avue-crud v-model="tableData" :option="crudOption" ref="crud" ></avue-crud> </div> </template> <script> import Vue from "vue"; import CustomSelect from "@/components/CustomSelect"; // 假设这是一个自定义的选择框组件 Vue.component("custom-select", CustomSelect); export default { data() { return { tableData: [{ id: 1, name: "张三", age: 28 }], crudOption: { menu: false, editBtn: false, addBtn: false, delBtn: false, column: [ { label: "ID", prop: "id", display: false, }, { label: "姓名", prop: "name", rules: [(v) => !!v || "请输入姓名"], // 添加校验规则 }, { label: "性别", prop: "gender", component: "custom-select", // 应用自定义选择器 dicData: [ { value: "male", label: "男" }, { value: "female", label: "女" }, ], }, { label: "年龄", prop: "age", component: "el-slider", // 使用 Element UI 的滑动条作为输入控件 props: { min: 0, max: 100, }, }, ], }, }; }, }; </script> ``` --- #### 注意事项 - 如果需要动态加载某些资源或者优化性能，可以考虑按需加载的方式减少打包体积[^2]。 - 当涉及国际化时，可以通过 `i18n` 方法为自定义组件提供多语言支持[^3]。 --- ###