el-form-renderer 的 type 有限, 默认只能渲染普通的表单项, 假如现在要渲染一个上传组件, type 就不够用了, 那怎么办呢? 这时候 component 选项就派上用场了
本文将介绍如何开发符合 el-form-renderer 接入标准的自定义组件, 实现对自定义组件的渲染
自定义组件接入的关键是在组件内部实现 v-model
建议在自定义组件上绑定 $attrs
el-form-renderer 对 v-model 的要求是:
<template>
<el-input v-model="newValue" v-bind="$attrs"></el-input>
</template>
<script setup>
import { watch, computed, useAttrs } from "vue"
let emit = defineEmits(["customEvent", "update:modelValue"])
let props = defineProps({
modelValue: String,
title: String
})
const attrs = useAttrs()
console.log(attrs)
watch(
() => props.modelValue,
() => {
emit("customEvent", newValue.value)
}
)
const newValue = computed({
get: () => {
return props.modelValue
},
set: value => {
emit("update:modelValue", value)
return value
}
})
</script>
则可以用 component 属性让 el-form-renderer 渲染此自定义组件