当前位置： 首页 > article >正文

Vue 自动配置表单 el-switch等不常用组件覆盖默认值问题

article 2025/2/21 23:20:46

有自动解析表单的vue组件如下，其原理是调用一个配置表单定义的接口，然后再调用获取表单配置的接口并将配置的数据覆盖表单的默认值。其中el-switch的配置值没有覆盖默认值，分析其原因。 主页面如下： <template> <div class="divBox"> <el-card class="box-card"> <el-tabs v-model="activeNamel1" @tab-click="handleTabClick" v-loading="loading" v-if="checkPermi(['admin:system:config:info'])"> <el-tab-pane v-for="tab,index in treeList" :key="index" :label="tab.name" :name="tab.id.toString()"> <template> <el-tabs v-if="tab.child.length > 0" v-model="activeNamel2" type="border-card" @tab-click="handleItemTabClick"> <el-tab-pane v-for="tabItem,itemIndex in tab.child" :key="itemIndex" :label="tabItem.name" :name="tabItem.extra" > <parser v-if="formConfChild.render" :is-edit="formConfChild.isEdit" :form-conf="formConfChild.content" :form-edit-data="currentEditData" @submit="handlerSubmit" /> </el-tab-pane> </el-tabs> <span v-else> <parser v-if="formConf.render" :is-edit="formConf.isEdit" :form-conf="formConf.content" :form-edit-data="currentEditData" @submit="handlerSubmit" /> </span> </template> </el-tab-pane> </el-tabs> </el-card> </div> </template> <script> import parser from '@/components/FormGenerator/components/parser/Parser' import * as categoryApi from '@/api/categoryApi.js' import * as selfUtil from '@/utils/XMutil.js' import * as systemFormConfigApi from '@/api/systemFormConfig.js' import * as systemSettingApi from '@/api/systemSetting.js' import * as systemConfigApi from '@/api/systemConfig.js' import Template from "@/views/appSetting/wxAccount/wxTemplate/index"; import {beautifierConf} from "@/components/FormGenerator/utils"; import { checkPermi } from "@/utils/permission"; // 权限判断函数 import {Debounce} from '@/utils/validate' export default { // name: "index", components: {Template, parser }, data() { return { loading: false, formConf: { content: { fields: [] }, id: null, render: false, isEdit: false }, formConfChild: { content: { fields: [] }, id: null, render: false, isEdit: false }, activeNamel1: null, activeNamel2: '',//针对文件特殊处理 treeList: [], editDataChild: {}, isCreate: 0, currentEditId: null, currentEditData: null, currentSelectedUploadFlag:null, } }, mounted() { this.handlerGetTreeList() this.getCurrentUploadSelectedFlag() }, methods: { checkPermi, handleTabClick(tab) { this.activeNamel2 = tab.$children[0].panes[0].name; this.handlerGetLevel2FormConfig(this.activeNamel2); }, handlerGetLevel1FormConfig(id) { const formPram = { id: id } this.currentEditId = id this.formConf.content = { fields: [] } this.formConf.render = false this.loading = true systemFormConfigApi.getFormConfigInfo(formPram).then(data => { const { id, name, info, content } = data this.formConf.content = JSON.parse(content) this.formConf.id = id this.handlerGetSettingInfo(id, 1) this.loading = false }).catch(() =>{ this.loading = false }) }, handleItemTabClick(tab, event) { //这里对tabs=tab.name和radio=id做了兼容 let _id = tab.name ? tab.name : tab if(!_id) return this.$message.error('表单配置不正确，请关联正确表单后使用') this.handlerGetLevel2FormConfig(_id) }, handlerGetLevel2FormConfig(id) { const formPram = { id: id } this.currentEditId = id this.formConfChild.content = { fields: [] } this.formConfChild.render = false this.loading = true systemFormConfigApi.getFormConfigInfo(formPram).then(data => { const { id, name, info, content } = data this.formConfChild.content = JSON.parse(content) this.formConfChild.id = id this.handlerGetSettingInfo(id, 2) this.loading = false }).catch(() =>{ this.loading = false }) }, handlerGetSettingInfo(id, level) { systemSettingApi.systemConfigInfo({ id: id }).then(data => { this.currentEditData = data if (level === 1) { this.formConf.isEdit = this.currentEditData !== null this.formConf.render = true } else { this.formConfChild.isEdit = this.currentEditData !== null this.formConfChild.render = true } }) }, handlerSubmit:Debounce(function(formValue) { this.handlerSave(formValue) }), handlerSave(formValue) { const _pram = this.buildFormPram(formValue) let _formId = 0 systemSettingApi.systemConfigSave(_pram).then(data => { this.$message.success('添加数据成功') }) }, handlerGetTreeList() { const _pram = { type: this.$constants.categoryType[5].value, status: 1 } this.loading = true categoryApi.treeCategroy(_pram).then(data => { this.treeList = this.handleAddArrt(data) if (this.treeList.length > 0) this.activeNamel1 = this.treeList[0].id.toString(); if (this.treeList.length > 0 && this.treeList[0].child.length > 0) { this.activeNamel2 = this.treeList[0].child[0].extra } if (this.activeNamel2) { this.handlerGetLevel2FormConfig(this.treeList[0].child[0].extra) } // else { // this.handlerGetLevel1FormConfig(this.treeList[0].extra) //} this.loading = false }).catch(() =>{ this.loading = false }) }, handleAddArrt(treeData) { // let _result = this.addTreeListLabel(treeData) const _result = selfUtil.addTreeListLabel(treeData) return _result }, buildFormPram(formValue) { const _pram = { fields: [], id: this.currentEditId, sort: 0, // 参数暂时无用 status: true // 参数暂时无用 } const _fields = [] Object.keys(formValue).forEach((key) => { _fields.push({ name: key, title: key, value: formValue[key] }) }) _pram.fields = _fields return _pram }, getCurrentUploadSelectedFlag(){ systemConfigApi.configGetUniq({key:"uploadType"}).then(data => { this.currentSelectedUploadFlag = parseInt(data) }) } } } </script> <style scoped> </style> 获取表单定义的接口及报文如下： http://127.0.0.1:8080/api/admin/system/form/temp/info?id=77&temp=1739687295 { "code": 200, "message": "操作成功", "data": { "id": 77, "name": "商城基础配置", "info": "商城配置-商城基础配置", "content": "{\"formRef\":\"elForm\",\"formModel\":\"formData\",\"size\":\"medium\",\"labelPosition\":\"right\",\"labelWidth\":300,\"formRules\":\"rules\",\"gutter\":15,\"disabled\":false,\"span\":24,\"formBtns\":true,\"fields\":[{\"__config__\":{\"label\":\"商品捐赠是否开启\",\"tag\":\"el-switch\",\"tagIcon\":\"switch\",\"defaultValue\":true,\"span\":24,\"showLabel\":true,\"labelWidth\":null,\"layout\":\"colFormItem\",\"required\":true,\"tips\":false,\"tipsDesc\":\"\",\"tipsIsLink\":false,\"tipsLink\":\"\",\"regList\":[],\"changeTag\":true,\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":102,\"renderKey\":1738534828949},\"style\":{},\"disabled\":false,\"active-text\":\"\",\"inactive-text\":\"\",\"active-color\":null,\"inactive-color\":null,\"active-value\":true,\"inactive-value\":false,\"__vModel__\":\"donation\"},{\"__config__\":{\"label\":\"商品捐赠比例设置\",\"tag\":\"el-input-number\",\"tagIcon\":\"number\",\"defaultValue\":19,\"span\":24,\"showLabel\":true,\"layout\":\"colFormItem\",\"labelWidth\":\"\",\"required\":true,\"tips\":false,\"tipsDesc\":\"\",\"tipsIsLink\":false,\"tipsLink\":\"\",\"regList\":[],\"changeTag\":true,\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":103,\"renderKey\":1738534896059},\"disabled\":false,\"min\":0,\"max\":100,\"step\":1,\"show-stops\":false,\"range\":false,\"__vModel__\":\"donation_rate\"},{\"__config__\":{\"label\":\"警戒库存\",\"showLabel\":true,\"changeTag\":true,\"labelWidth\":300,\"tag\":\"el-input-number\",\"tagIcon\":\"number\",\"span\":24,\"layout\":\"colFormItem\",\"required\":true,\"regList\":[],\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":102,\"renderKey\":1590032029141,\"defaultValue\":2,\"tips\":false},\"placeholder\":\"警戒库存\",\"step\":1,\"step-strictly\":false,\"controls-position\":\"\",\"disabled\":false,\"__vModel__\":\"store_stock\",\"max\":99999,\"min\":0},{\"__config__\":{\"label\":\"退货理由\",\"labelWidth\":300,\"showLabel\":true,\"tag\":\"el-input\",\"tagIcon\":\"textarea\",\"required\":true,\"layout\":\"colFormItem\",\"span\":24,\"regList\":[],\"changeTag\":true,\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":103,\"renderKey\":1590032054065,\"defaultValue\":\"收货地址填错了 与描述不符 信息填错了，重新拍 收到商品损坏了 未按预定时间发货 其它原因\",\"tips\":false},\"type\":\"textarea\",\"placeholder\":\"请填写退货理由退货理由\",\"autosize\":{\"minRows\":4,\"maxRows\":4},\"style\":{\"width\":\"100%\"},\"maxlength\":null,\"show-word-limit\":false,\"readonly\":false,\"disabled\":false,\"__vModel__\":\"stor_reason\"},{\"__config__\":{\"label\":\"移动端顶部logo图标(127*45)\",\"tag\":\"self-upload\",\"tagIcon\":\"upload\",\"layout\":\"colFormItem\",\"defaultValue\":null,\"showLabel\":true,\"labelWidth\":300,\"required\":true,\"span\":24,\"showTip\":false,\"buttonText\":\"点击上传\",\"regList\":[],\"changeTag\":true,\"fileSize\":2,\"sizeUnit\":\"MB\",\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":124,\"renderKey\":1595659136385,\"tips\":false},\"__slot__\":{\"list-type\":true},\"action\":\"https://jsonplaceholder.typicode.com/posts/ \",\"disabled\":true,\"accept\":\"\",\"name\":\"file\",\"auto-upload\":true,\"list-type\":\"text\",\"multiple\":false,\"__vModel__\":\"mobile_top_logo\"},{\"__config__\":{\"label\":\"移动端登录页logo(90x90)\",\"tag\":\"self-upload\",\"tagIcon\":\"upload\",\"layout\":\"colFormItem\",\"defaultValue\":null,\"showLabel\":true,\"labelWidth\":300,\"required\":true,\"span\":24,\"showTip\":false,\"buttonText\":\"点击上传\",\"regList\":[],\"changeTag\":true,\"fileSize\":2,\"sizeUnit\":\"MB\",\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":102,\"renderKey\":1629094835969,\"tips\":false},\"__slot__\":{\"list-type\":true},\"action\":\"https://jsonplaceholder.typicode.com/posts/ \",\"disabled\":true,\"accept\":\"\",\"name\":\"file\",\"auto-upload\":true,\"list-type\":\"text\",\"multiple\":false,\"__vModel__\":\"mobile_login_logo\"},{\"__config__\":{\"label\":\"普通商品未支付取消订单时间(单位:小时)\",\"showLabel\":true,\"changeTag\":true,\"labelWidth\":300,\"tag\":\"el-input-number\",\"tagIcon\":\"number\",\"span\":24,\"layout\":\"colFormItem\",\"required\":true,\"regList\":[],\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":105,\"renderKey\":1590032096481,\"defaultValue\":2,\"tips\":false},\"placeholder\":\"普通商品未支付取消订单时间(单位:小时)\",\"step\":1,\"step-strictly\":false,\"controls-position\":\"\",\"disabled\":false,\"__vModel__\":\"order_cancel_time\",\"max\":99999,\"min\":0,\"precision\":0},{\"__config__\":{\"label\":\"活动商品未支付取消订单时间(单位小时)\",\"showLabel\":true,\"changeTag\":true,\"labelWidth\":300,\"tag\":\"el-input-number\",\"tagIcon\":\"number\",\"span\":24,\"layout\":\"colFormItem\",\"required\":true,\"regList\":[],\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":106,\"renderKey\":1590032112020,\"defaultValue\":2,\"tips\":false},\"placeholder\":\"活动商品未支付取消订单时间(单位:小时)\",\"step\":1,\"step-strictly\":false,\"controls-position\":\"\",\"disabled\":false,\"__vModel__\":\"order_activity_time\",\"max\":99999,\"min\":0,\"precision\":0},{\"__config__\":{\"label\":\"网站名称\",\"labelWidth\":null,\"showLabel\":true,\"changeTag\":true,\"tag\":\"el-input\",\"tagIcon\":\"input\",\"required\":true,\"layout\":\"colFormItem\",\"span\":24,\"document\":\"Element - The world's most popular Vue UI framework \",\"regList\":[],\"formId\":101,\"renderKey\":1629086692739,\"tips\":false},\"__slot__\":{\"prepend\":\"\",\"append\":\"\"},\"placeholder\":\"请输入网站名称\",\"style\":{\"width\":\"100%\"},\"clearable\":true,\"prefix-icon\":\"\",\"suffix-icon\":\"\",\"maxlength\":null,\"show-word-limit\":false,\"readonly\":false,\"disabled\":false,\"__vModel__\":\"site_name\"},{\"__config__\":{\"label\":\"网站地址\",\"labelWidth\":null,\"showLabel\":true,\"changeTag\":true,\"tag\":\"el-input\",\"tagIcon\":\"input\",\"required\":true,\"layout\":\"colFormItem\",\"span\":24,\"document\":\"Element - The world's most popular Vue UI framework \",\"regList\":[],\"formId\":102,\"renderKey\":1629086763346,\"tips\":false},\"__slot__\":{\"prepend\":\"\",\"append\":\"\"},\"placeholder\":\"webSiet网站地址网站地址网站地址\",\"style\":{\"width\":\"100%\"},\"clearable\":true,\"prefix-icon\":\"\",\"suffix-icon\":\"\",\"maxlength\":null,\"show-word-limit\":true,\"readonly\":false,\"disabled\":false,\"__vModel__\":\"site_url\"},{\"__config__\":{\"label\":\"SEO标题\",\"labelWidth\":null,\"showLabel\":true,\"changeTag\":true,\"tag\":\"el-input\",\"tagIcon\":\"input\",\"required\":true,\"layout\":\"colFormItem\",\"span\":24,\"document\":\"Element - The world's most popular Vue UI framework \",\"regList\":[],\"formId\":102,\"renderKey\":1629087874359,\"tips\":false},\"__slot__\":{\"prepend\":\"\",\"append\":\"\"},\"placeholder\":\"请输入SEO标题\",\"style\":{\"width\":\"100%\"},\"clearable\":true,\"prefix-icon\":\"\",\"suffix-icon\":\"\",\"maxlength\":null,\"show-word-limit\":false,\"readonly\":false,\"disabled\":false,\"__vModel__\":\"seo_title\"},{\"__config__\":{\"label\":\"新闻幻灯片数量上限\",\"showLabel\":true,\"changeTag\":true,\"labelWidth\":null,\"tag\":\"el-input-number\",\"tagIcon\":\"number\",\"span\":24,\"layout\":\"colFormItem\",\"required\":true,\"regList\":[],\"document\":\"Element - The world's most popular Vue UI framework \",\"formId\":101,\"renderKey\":1629087608122,\"defaultValue\":1,\"tips\":false},\"placeholder\":\"新闻幻灯片数量上限新闻幻灯片数量上限新闻幻灯片数量上限新闻幻灯片数量上限\",\"step\":1,\"step-strictly\":false,\"controls-position\":\"\",\"disabled\":false,\"__vModel__\":\"news_slides_limit\",\"min\":1,\"max\":3},{\"__config__\":{\"label\":\"移动商城api\",\"labelWidth\":null,\"showLabel\":true,\"changeTag\":true,\"tag\":\"el-input\",\"tagIcon\":\"input\",\"required\":true,\"layout\":\"colFormItem\",\"span\":24,\"document\":\"Element - The world's most popular Vue UI framework \",\"regList\":[],\"formId\":101,\"renderKey\":1639127436585,\"tips\":false},\"__slot__\":{\"prepend\":\"\",\"append\":\"\"},\"placeholder\":\"移动商城api_小程序源码下载前必须配置\",\"style\":{\"width\":\"100%\"},\"clearable\":true,\"prefix-icon\":\"\",\"suffix-icon\":\"\",\"maxlength\":null,\"show-word-limit\":true,\"readonly\":false,\"disabled\":false,\"__vModel__\":\"front_api_url\"}]}", "createTime": "2020-05-16 02:19:37", "updateTime": "2025-02-16 14:27:39" } } 获取配置的接口及报文如下： api/admin/system/config/info?formId=77&temp=1739687295 { "code": 200, "message": "操作成功", "data": { "news_slides_limit": "3", "mobile_login_logo": "http://127.0.0.1:8080/yczjimage/public/operation/2025/02/02/71622984926b44a485fc962f153804ecddvigsrbm3.jpg ", "donation_rate": "19", "store_stock": "22", "order_cancel_time": "1", "mobile_top_logo": "http://127.0.0.1:8080/yczjimage/public/maintain/2021/12/25/54d7a09f1dee463fa12ec01c02294b31z66prnux9w.png ", "seo_title": "一码秦川", "site_name": "一马秦川", "order_activity_time": "1", "stor_reason": "收货地址填错了\n与描述不符 \n信息填错了，重新拍 \n收到商品损坏了 \n未按预定时间发货 \n其它原因\n测试111", "site_url": "https://app.net ", "donation": "true", "id": "77", "front_api_url": "http://127.0.0.1:8081 " } } 表单组件转化的Vue组件如下： <script> import render from '@/components/FormGenerator/components/render/render.js' const ruleTrigger = { 'el-input': 'blur', 'el-input-number': 'blur', 'el-switch': 'change', 'el-select': 'change', 'el-radio-group': 'change', 'el-checkbox-group': 'change', 'el-cascader': 'change', 'el-time-picker': 'change', 'el-date-picker': 'change', 'el-rate': 'change' } function renderFrom(h) { const { formConfCopy } = this return ( <el-row gutter={formConfCopy.gutter}> <el-form size={formConfCopy.size} label-position={formConfCopy.labelPosition} disabled={formConfCopy.disabled} label-width={`${formConfCopy.labelWidth}px`} ref={formConfCopy.formRef} // model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664 props={{ model: this[formConfCopy.formModel] }} rules={this[formConfCopy.formRules]} > {renderFormItem.call(this, h, formConfCopy.fields)} {formConfCopy.formBtns && formBtns.call(this, h)} </el-form> </el-row> ) } function formBtns(h) { return <el-col> <el-form-item size='mini'> <el-button type='primary' onClick={this.submitForm}>提交</el-button> </el-form-item> </el-col> } function renderFormItem(h, elementList) { return elementList.map(scheme => { const config = scheme.__config__ const layout = layouts[config.layout] if (layout) { return layout.call(this, h, scheme) } throw new Error(`没有与${config.layout}匹配的layout`) }) } function renderChildren(h, scheme) { const config = scheme.__config__ if (!Array.isArray(config.children)) return null return renderFormItem.call(this, h, config.children) } function setValue(event, config, scheme) { this.$set(config, 'defaultValue', event) this.$set(this[this.formConf.formModel], scheme.__vModel__, event) } function buildListeners(scheme) { const config = scheme.__config__ const methods = this.formConf.__methods__ || {} const listeners = {} // 给__methods__中的方法绑定this和event Object.keys(methods).forEach(key => { listeners[key] = event => methods[key].call(this, event) }) // 响应 render.js 中的 vModel $emit('input', val) listeners.input = event => setValue.call(this, event, config, scheme) return listeners } const layouts = { colFormItem(h, scheme) { const config = scheme.__config__ const listeners = buildListeners.call(this, scheme) let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null if (config.showLabel === false) labelWidth = '0' if(config.tips && !config.tipsIsLink){ return ( <el-col span={config.span}> <el-form-item label-width={labelWidth} prop={scheme.__vModel__} label={config.showLabel ? config.label : ''}> <el-tooltip effect="dark" placement="top-start" style="padding:10px 5px 0 0;">             <i class="el-icon-warning-outline" />             <div slot="content" style="max-width:400px;">{config.tipsDesc}</div>          </el-tooltip> <render conf={scheme} {...{ on: listeners }} /> </el-form-item> </el-col> ) }else if(config.tips && config.tipsIsLink){ return ( <el-col span={config.span}> <el-form-item label-width={labelWidth} prop={scheme.__vModel__} label={config.showLabel ? config.label : ''}> <el-tooltip effect="dark" placement="top-start" style="padding:10px 5px 0 0;">             <i class="el-icon-warning-outline" />             <div slot="content" style="max-width:400px;"> <a href={config.tipsLink} target="_blank">{config.tipsDesc}</a> </div>          </el-tooltip> <render conf={scheme} {...{ on: listeners }} /> </el-form-item> </el-col> ) }else{ return ( <el-col span={config.span}> <el-form-item label-width={labelWidth} prop={scheme.__vModel__} label={config.showLabel ? config.label : ''}> <render conf={scheme} {...{ on: listeners }} /> </el-form-item> </el-col> ) } }, rowFormItem(h, scheme) { let child = renderChildren.apply(this, arguments) if (scheme.type === 'flex') { child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}> {child} </el-row> } return ( <el-col span={scheme.span}> <el-row gutter={scheme.gutter}> {child} </el-row> </el-col> ) } } export default { components: { render }, props: { formConf: { type: Object, required: true }, formEditData: { type: Object }, isEdit: { type: Boolean, default: false } }, data() { if (this.isEdit) { // 初始化待编辑数据 this.formConf.fields.forEach(conf => { // 设置现有的数据 const hasValueForEdit = this.formEditData[conf.__vModel__] if(hasValueForEdit){ conf.__config__.defaultValue = hasValueForEdit } // 如果是el-select标签 判断数据后改变实现默认选中效果 if(conf.__config__.tag === 'el-select' || conf.__config__.tag === 'el-radio-group'){ const perValue = conf.__slot__.options.filter(option => option.value == this.formEditData[conf.__vModel__]) if(perValue.length > 0){ // 有表单数据 conf.__config__.defaultValue = perValue[0].value } } }) } const data = { formConfCopy: JSON.parse(JSON.stringify(this.formConf)), [this.formConf.formModel]: {}, [this.formConf.formRules]: {} } this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel]) this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules]) return data }, methods: { initFormData(componentList, formData) { componentList.forEach(cur => { const config = cur.__config__ if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue if (config.children) this.initFormData(config.children, formData) }) }, buildRules(componentList, rules) { componentList.forEach(cur => { const config = cur.__config__ if (Array.isArray(config.regList)) { if (config.required) { const required = { required: config.required, message: cur.placeholder } if (Array.isArray(config.defaultValue)) { required.type = 'array' required.message = `请至少选择一个${config.label}` } required.message === undefined && (required.message = `${config.label}不能为空`) config.regList.push(required) } rules[cur.__vModel__] = config.regList.map(item => { item.pattern && (item.pattern = eval(item.pattern)) item.trigger = ruleTrigger && ruleTrigger[config.tag] return item }) } if (config.children) this.buildRules(config.children, rules) }) }, resetForm() { this.$emit('resetForm', this.formConf) this.formConfCopy = JSON.parse(JSON.stringify(this.formConf)) this.$refs[this.formConf.formRef].resetFields() }, submitForm() { this.$refs[this.formConf.formRef].validate(valid => { if (!valid) return false // 触发sumit事件 this.$emit('submit', this[this.formConf.formModel]) return true }) } }, render(h) { return renderFrom.call(this, h) } } </script> 组件渲染的js如下： function vModel(self, dataObject, defaultValue) { dataObject.props.value = defaultValue dataObject.on.input = val => { self.$emit('input', val) } } const componentChild = {} /** * 将./slots中的文件挂载到对象componentChild上 * 文件名为key，对应JSON配置中的__config__.tag * 文件内容为value，解析JSON配置中的__slot__ */ const slotsFiles = require.context('./slots', true, /\.js$/) const keys = slotsFiles.keys() || [] keys.forEach(key => { const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1') const value = slotsFiles(key).default componentChild[tag] = value }) export default { render(h) { const dataObject = { attrs: {}, props: {}, on: {}, style: {} } const confClone = JSON.parse(JSON.stringify(this.conf)) const children = [] const childObjs = componentChild[confClone.__config__.tag] if (childObjs) { Object.keys(childObjs).forEach(key => { const childFunc = childObjs[key] if (confClone.__slot__ && confClone.__slot__[key]) { children.push(childFunc(h, confClone, key)) } }) } Object.keys(confClone).forEach(key => { const val = confClone[key] if (key === '__vModel__') { vModel(this, dataObject, confClone.__config__.defaultValue) } else if (dataObject[key]) { console.log(`__vModel__: ${JSON.stringify(dataObject)}`) dataObject[key] = { ...dataObject[key], ...val } } else { dataObject.attrs[key] = val } }) delete dataObject.attrs.__config__ delete dataObject.attrs.__slot__ return h(this.conf.__config__.tag, dataObject, children) }, props: ['conf'] }

从代码和接口报文来看，el-switch 的配置值没有覆盖默认值的原因可能如下：

1. 数据绑定问题

在 parser 组件的 data 中，formConfCopy 是通过 JSON.parse(JSON.stringify(this.formConf)) 深拷贝而来。而 formConf 是通过接口获取的表单定义数据，其中 el-switch 的配置如下：

JSONCopy

{
  "__config__": {
    "label": "商品捐赠是否开启",
    "tag": "el-switch",
    "tagIcon": "switch",
    "defaultValue": true,
    "span": 24,
    "showLabel": true,
    "labelWidth": null,
    "layout": "colFormItem",
    "required": true,
    "tips": false,
    "tipsDesc": "",
    "tipsIsLink": false,
    "tipsLink": "",
    "regList": [],
    "changeTag": true,
    "document": "https://element.eleme.cn/#/zh-CN/component/switch",
    "formId": 102,
    "renderKey": 1738534828949
  },
  "style": {},
  "disabled": false,
  "active-text": "",
  "inactive-text": "",
  "active-color": null,
  "inactive-color": null,
  "active-value": true,
  "inactive-value": false,
  "__vModel__": "donation"
}

在 parser 组件的 data 初始化时，formConfCopy 的 fields 中的每个配置项的 __config__.defaultValue 会被赋值给 formData 对应的字段（通过 initFormData 方法）。但是，el-switch 的 __vModel__ 是 donation，而接口返回的配置数据中 donation 的值是 "true"（字符串），而不是 true（布尔值）。

JSONCopy

"donation": "true"

这可能导致 el-switch 的值没有正确绑定，因为 el-switch 的 active-value 和 inactive-value 分别是 true 和 false（布尔值），而绑定的值是字符串 "true"，类型不匹配。

2. 数据更新问题

在 parser 组件的 data 初始化时，虽然会根据 formEditData 更新 formConfCopy.fields 中的 __config__.defaultValue，但是 el-switch 的值没有正确更新。

在 parser 组件的 data 初始化代码中：

JavaScriptCopy

if (this.isEdit) { // 初始化待编辑数据
  this.formConf.fields.forEach(conf => {
    // 设置现有的数据
    const hasValueForEdit = this.formEditData[conf.__vModel__]
    if(hasValueForEdit){
      conf.__config__.defaultValue = hasValueForEdit
    }
    // 如果是el-select标签 判断数据后改变实现默认选中效果
    if(conf.__config__.tag === 'el-select' || conf.__config__.tag === 'el-radio-group'){
      const perValue = conf.__slot__.options.filter(option => option.value == this.formEditData[conf.__vModel__])
      if(perValue.length > 0){ // 有表单数据
        conf.__config__.defaultValue = perValue[0].value
      }
    }
  })
}

这里只处理了 el-select 和 el-radio-group 的情况，没有处理 el-switch 的情况。因此，el-switch 的值没有被正确更新。

3. 组件渲染问题

在组件渲染的 render.js 中，vModel 函数会根据 __vModel__ 和 __config__.defaultValue 设置 dataObject.props.value，并绑定 input 事件。

JavaScriptCopy

function vModel(self, dataObject, defaultValue) {
  dataObject.props.value = defaultValue

  dataObject.on.input = val => {
    self.$emit('input', val)
  }
}

但是，el-switch 的值是布尔值，而绑定的值是字符串 "true"，这可能导致 el-switch 的值没有正确渲染。

解决方法

  1. 修正接口返回的数据类型：确保接口返回的 donation 的值是布尔值 true，而不是字符串 "true"。

  2. 在 parser 组件中处理 el-switch 的值：在 data 初始化时，添加对 el-switch 的处理逻辑，将字符串 "true" 转换为布尔值 true。

JavaScriptCopy

if (this.isEdit) { // 初始化待编辑数据
  this.formConf.fields.forEach(conf => {
    // 设置现有的数据
    const hasValueForEdit = this.formEditData[conf.__vModel__]
    if(hasValueForEdit){
      if(conf.__config__.tag === 'el-switch'){ // 处理 el-switch 的值
        conf.__config__.defaultValue = hasValueForEdit === "true" ? true : false
      }else{
        conf.__config__.defaultValue = hasValueForEdit
      }
    }
    // 如果是el-select标签 判断数据后改变实现默认选中效果
    if(conf.__config__.tag === 'el-select' || conf.__config__.tag === 'el-radio-group'){
      const perValue = conf.__slot__.options.filter(option => option.value == this.formEditData[conf.__vModel__])
      if(perValue.length > 0){ // 有表单数据
        conf.__config__.defaultValue = perValue[0].value
      }
    }
  })
}

  1. 在组件渲染的 render.js 中处理 el-switch 的值：在 vModel 函数中，添加对 el-switch 的处理逻辑，将字符串 "true" 转换为布尔值 true。

JavaScriptCopy

function vModel(self, dataObject, defaultValue) {
  if(self.conf.__config__.tag === 'el-switch'){ // 处理 el-switch 的值
    dataObject.props.value = defaultValue === "true" ? true : false
  }else{
    dataObject.props.value = defaultValue
  }

  dataObject.on.input = val => {
    self.$emit('input', val)
  }
}

http://www.kler.cn/a/549754.html

相关文章：

  • Versal - 基础5（裸机开发 AIE-ML+Vitis2024.2界面aie report介绍）
  • 基于Python实现的缓存淘汰替换策略算法，该算法将缓存分区
  • 网络安全-攻击流程-应用层
  • Java每日精进·45天挑战·Day17
  • 【第3章：卷积神经网络（CNN）——3.1 CNN的基本结构与工作原理】
  • 大语言模型推理中的显存优化 有哪些
  • 如何利用Vuex的插件来记录和追踪状态变化？
  • Linux下tomcat实现进程守护
  • PostgreSQL如何关闭自动commit
  • PHP框架入门指南：从零构建现代Web应用
  • GO切片slice详细解析
  • (PC+WAP) PbootCMS中小学教育培训机构网站模板 – 绿色小学学校网站源码下载
  • 【第12章：深度学习与伦理、隐私—12.4 深度学习与伦理、隐私领域的未来挑战与应对策略】
  • DeepSeek 服务器繁忙的全面解决方案
  • 铁塔电单车协议对接电单车TCP json协议对接成熟充电桩系统搭建低速充电桩TCP 接口规范
  • 【第14章：神经符号集成与可解释AI—14.2 可解释AI技术：LIME、SHAP等的实现与应用案例】
  • 深入解析：如何利用 Python 爬虫获取淘宝/天猫 SKU 详细信息
  • 让编程变成一种享受-明基RD320U显示器
  • 机器学习 网络安全 网络安全科学
  • 我们能阻止人工智能末日吗？