이 기사에서는 주로 동적 렌더링 및 양식의 시각적 구성을 구현하는 Vue+ElementUI 방법을 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.
동적 렌더링은 비동기 데이터를 갖는 것을 의미하며 다음과 같습니다.
{
"inline": true,
"labelPosition": "right",
"labelWidth": "",
"size": "small",
"statusIcon": true,
"formItemList": [
{
"type": "input",
"label": "姓名",
"disable": false,
"readonly": false,
"value": "",
"placeholder": "请输入姓名",
"rules": [],
"key": "name",
"subtype": "text"
},
{
"type": "radio",
"label": "性别",
"value": "",
"button": false,
"border": true,
"rules": [],
"key": "gender",
"options": [
{
"value": "1",
"label": "男",
"disabled": false
},
{
"value": "0",
"label": "女",
"disabled": false
}
]
}
]
}그러면 필요합니다.
마지막으로 제출된 양식 데이터는 다음과 같습니다.
{
"name": "Genji",
"gender": "1"
}그런 다음 우리의 목표는 이러한 구성 요소를 캡슐화하는 것입니다.
<dynamic-form :config="someConfig" v-model="someData" />
Implementation
시작하기 전에, v-model의 작업을 알아야 합니다. 원리:
<input v-model="something">
이것은 다음 예의 구문 설탕일 뿐입니다.
<input :value="something" @input="something = $event.target.value">
이를 이해한 후 이 구성 요소를 단계별로 구현해 보겠습니다.
먼저 구성을 el-form으로 전달합니다.
<template>
<el-form
class="dynamic-form"
:inline="formConfig.inline"
:model="value"
:label-position="formConfig.labelPosition"
:label-width="formConfig.labelWidth"
:size='formConfig.size'
:status-icon="formConfig.statusIcon">
<slot/>
</el-form>
</template>
<script>
export default {
props: {
formConfig: {
type: Object,
required: true
},
value: {
type: Object,
required: true
}
},
}
</script>두 번째로 기본값을 설정합니다.
각 form-item 에는 v-model이 필요하므로 렌더링하기 전에 각 필드에 값이 있는지 확인하세요. 여기서 한 가지 주의할 점은 상위 컴포넌트에서 전달한 prop은 컴포넌트에서 직접 수정하면 안 되므로 {...this.value} 를 사용하여 여기에 빠르게 복사하고 마지막으로 상위 구성 요소에 알리는 것을 잊지 마세요. 코드는 다음과 같습니다. form-item 都会需要一个 v-model ，所以在渲染之前，保证每个字段都有值。这里需要注意一点，组件内不要直接修改父组件传入的 prop ，所以我们在这里用 {...this.value} 快速拷贝一份，最后别忘了通知父组件。代码如下：
export default {
props: {
formConfig: {...},
value: {...},
},
methods: {
setDefaultValue() {
const formData = { ...this.value }
// 设置默认值
this.formConfig.formItemList.forEach(({ key, value }) => {
if (formData[key] === undefined || formData[key] === null) {
formData[key] = value
}
})
this.$emit('input', formData)
}
},
mounted() {
this.setDefaultValue()
},
}第三步，渲染 form-item 。
如何把下面的数据渲染为我们熟悉的 el-form-item ？
{
"type": "input",
"label": "姓名",
"disable": false,
"readonly": false,
"value": "",
"placeholder": "请输入姓名",
"rules": [],
"key": "name",
"subtype": "text"
}第一种，利用 vue 内置的 component 组件，写起来可能像这样：
<el-form-item>
<component :is="`el-${item.type}`" />
</el-form-item>第二种，使用 v-if 逐个判断：
<el-form-item> <el-input v-if="item.type === 'input'" /> <span v-else>未知控件类型</span> </el-form-item>
考虑到每种表单控件的处理逻辑千差万别，楼主采用了第二种方式。
根据这个思路，我们来封装一个 dynamic-form-item ，接收一个 item ，渲染一个 el-form-item ：
<template>
<el-form-item :rules="item.Rules" :label="item.label" :prop="item.key">
<el-input
v-if="item.type==='input'"
v-bind="$attrs" v-on="$listeners"
:type="item.subtype"
:placeholder="item.placeholder"
:disabled="item.disable"
:readonly="item.readonly"
:autosize="item.autosize"></el-input>
<el-select
v-else-if="item.type==='select'"
v-bind="$attrs" v-on="$listeners"
:multiple="item.multiple"
:disabled="item.disabled"
:multiple-limit="item.multipleLimit">
<el-option
v-for="o in item.options"
:key="o.value"
:label="o.label"
:value="o.value"
:disabled="o.disabled">
</el-option>
</el-select>
<!--突然有点想念JSX-->
...
<span v-else>未知控件类型</span>
</el-form-item>
</template>
<script>
export default {
props: {
item: {
type: Object,
required: true
}
}
}
</script>tips: 使用 v-bind="$attrs" v-on="$listeners" 可以方便地转发父组件的 v-model 指令，详见vue高阶组件。
最后，我们就可以循环输出一个完整的表单了：
<dynamic-form-item v-for="item in formConfig.formItemList" :key="item.key" v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
这里不能用 v-model="value[item.key]" ，上文说了，组件内不能直接修改props，所以这里我们还是转发一下。
methods: {
handleInput(val, key) {
// 这里element-ui没有上报event，直接就是value了
this.$emit('input', { ...this.value, [key]: val })
},
setDefaultValue() {...}
},完整代码地址： src/components/dynamic-form/form.vue
扩展功能
1.数字显示单位，限制小数位数
element-ui 没有做这个功能，不过我觉得还是挺常见的，所以使用 el-input 手动封装了一个 input-number :
<!--普通使用--> <input-number v-model="someNumber" :min="1" :max="99" :decimal1="2" append="元"></input-number> <!--在dynamic-form-item中的应用--> <input-number v-else-if="item.type==='number'" v-bind="$attrs" v-on="$listeners" :min="item.min" :max="item.max" :decimal1="item.decimal1" :append="item.append" :prepend="item.prepend" :disabled="item.disabled"></input-number>
完整代码： src/components/dynamic-form/input-number.vue
2.异步验证
得益于 async-validator ，我们可以很方便地自定义验证规则。
在配置中
{
"type": "input",
...
"rules":[
{
"sql": "SELECT {key} FROM balabala",
"message": "xx已被占用",
"trigger": "blur"
}
]
}在 dynamic-form-item
<template>
<el-form-item :rules="Rules" >
...
</el-form-item>
</template>
<script>
import request from '@/utils/request'
export default {
props: {
item: {...}
},
computed: {
Rules() {
const rules = this.item.rules
if (rules === undefined) return undefined
const R = []
rules.forEach(rule => {
if (rule.sql) {
const validator = (rule2, value, callback) => {
// 根据项目自行修改
request('/api/validate', 'POST', {
key: rule2.field,
value,
sql: rule.sql.replace(/{key}/ig, rule2.field)
})
.then(res => {
callback(!res || undefined)
})
.catch(err => {
this.$message.error(err.message)
callback(false)
})
}
R.push({ validator, message: rule.message, trigger: 'blur' })
} else {
R.push(rule)
}
})
return R
}
},
}
</script>{
"type": "cascader",
...
"areaShortcut": "provinceAndCityData"
}<template> <el-form-item> ... <el-cascader :options="item.options || require('element-china-area-data')[item.areaShortcut]" ></el-cascader> </el-form-item> </template>
{
"type": "checkbox",
...
"optionsUrl": "/api/some/options"
}dynamic-form-item 을 캡슐화하고, 항목을 받고, el-form-item을 렌더링합니다. <template>
<el-form-item>
...
<el-select>
<el-option
v-for="o in item.options || ajaxOptions"
></el-option>
</el-select>
</el-form-item>
</template>
<script>
import request from '@/utils/request'
export default {
props: {
item: {...}
},
computed: {...},
data() {
return {
ajaxOptions: []
}
},
created() {
const { optionsUrl, key, type } = this.item
if (optionsUrl) {
// 根据项目自行修改
request(`${optionsUrl}?key=${key}`, 'GET')
.then(res => {
this.ajaxOptions = res
})
.catch(err => { this.$message.error(err.message) })
}
}
}
</script> v-bind=" 사용 $ attrs" v-on="$listeners" 는 상위 구성 요소의 v-model 지시어를 쉽게 전달할 수 있습니다. 자세한 내용은 vue 고차 구성 요소를 참조하세요. 마지막으로 완전한 양식을 반복할 수 있습니다. rrreee
v-model="value[item.key]" 는 여기서 사용할 수 없습니다. 위에서 언급한 대로 구성 요소를 직접 사용할 수 없습니다. , 여기에 전달하겠습니다. rrreee
전체 코드 주소:src/comComponents/dynamic-form/form.vue
element -ui에는 이 기능이 없지만 매우 일반적인 것 같아서 el-input을 사용하여 입력 번호를 수동으로 캡슐화했습니다.
🎜rrreee🎜전체 코드: src/comComponents/dynamic-form/input-number.vue🎜🎜🎜🎜 2. 비동기 유효성 검사🎜🎜🎜🎜async-validator 덕분에 유효성 검사 규칙을 쉽게 사용자 정의할 수 있습니다. 🎜🎜 🎜🎜구성 중🎜rrreee🎜 동적 양식 항목 구성 요소에서 item.rules를 탐색하고 SQL 확인을 사용자 정의 유효성 검사 기능으로 변환합니다. 🎜rrreee🎜3. 주 및 도시 빠른 구성🎜🎜element-china-area- 작성자에게 감사드립니다. 데이터. 🎜🎜구성:🎜rrreee🎜동적 양식 항목 구성 요소:🎜rrreee🎜4. 원격에서 옵션 로드 🎜🎜라디오, 체크박스, 캐스케이더, 선택을 포함하되 이에 국한되지 않음🎜🎜구성:🎜rrreee🎜In 동적 양식 항목 구성 요소: 🎜rrreee🎜위 내용은 모든 사람을 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜mongodb 데이터베이스에 연결하기 위한 nodejs 메서드의 예🎜🎜🎜🎜iview에서 선택기 다중 선택 확인 방법🎜🎜🎜🎜Axios Element를 사용하여 전역 요청 로딩 방법 구현🎜🎜위 내용은 폼의 동적 렌더링 및 시각적 구성을 구현하는 Vue+ElementUI 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
