avue-form表单网络字典渲染问题

最新推荐文章于 2024-03-26 09:56:49 发布
最新推荐文章于 2024-03-26 09:56:49 发布
阅读量824 收藏
点赞数
文章标签： javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42574738/article/details/126529579
版权

avue组件里面提供了一个功能叫做数据字典的功能

具体配置可以查看数据字典 | Avue

但是有时候会发现配置了网络字典在进入该组件的时候发送了请求 没有渲染在对应的子组件里面 或者压根就没有进行请求的发送，根本原因就是key的问题 avue-form里面的key属性需要进行重新赋值，而且这个赋值需要在将option渲染进去之后重新赋值就可以解决这个问题

诶嘿..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue表单重新渲染后验证
qq_39920109的博客
01-18 766
在项目中经常遇到需要重新渲染重新验证表单规则的情况 this.$nextTick(() => { const nameR = `ruleForm${this.active}` this.$refs[nameR].clearValidate('readerPreSql') }) 其中 readerPreSql 是我要去重新校验的表单某一项，绑定的是prop的属性值； 如果需要重新渲染整个表单，代码如下 this.$nextTick(() => { his.$refs['ruleForm0'
Vue列表渲染
xiaochen的博客
06-22 130
react、vue中的key有什么作用? (key的内部原理)示例：
Avue使用本地/网络数据字典
paidaboluo的博客
08-23 4282
Avue使用本地/网络数据字典
avue 中字典的使用
cwxBlogs
07-14 1万+
在实际开发中，有些可选的字段通常是用数字来代替文字进行存储，而前端显示的时候又使用的是文字，所以在avue中，字典通常作为这些字段(下拉框，多选，单选)的处理。 1.1 在当前的页面列中直接填写 适用数量较少的选项 column: [{ label: "经营状态", prop: "businessStatus", type: "select", dicData: [ { label: "正常", value: 1, }, {
使用 Vue 的页面变慢的原因
liuhao9999的博客
02-22 2226
综上所述，为了提高 Vue 页面的性能，可以采取多种措施，包括优化数据渲染、减少不必要的渲染、优化打包配置、调整组件结构以及选择合适的第三方库。同时，还可以使用性能分析工具来识别和解决性能瓶颈。
Python关于 Django 的web- Form 表单验证
07-02
在Python的Web开发框架Django中，Form表单验证是一个至关重要的部分，它允许开发者创建用户界面并确保从用户那里接收到的数据是有效且安全的。Form类是Django提供的一个强大工具，用于处理HTTP请求中的数据，进行...
Python中使用django form表单验证的方法
10-20
`{{ form.as_p }}`会自动将表单字段以段落（`<p>`标签）的形式渲染出来，包括字段标签和错误消息（如果有的话）。 在视图函数中，我们可以实例化这个表单类，并使用`request.POST`数据来填充表单。接着，调用`is_...
解决Django一个表单对应多个按钮的问题
09-19
本篇文章将详细介绍如何解决Django中一个表单对应多个按钮的问题。 首先，我们要理解Django表单的基本原理。Django的表单（`forms.py`）通常定义了字段和验证规则，而视图（`views.py`）则负责处理用户提交的数据。...
Python-Marmir把输入的Python数据结构转换为电子表单
08-10
比如，你可以利用Flask的模板引擎来渲染Marmir生成的表单，然后通过Flask的路由处理表单的提交。 ```python from flask import Flask, render_template, request from marmir import form app = Flask(__name__) ...
Python的Django框架中的表单处理示例
09-21
为了解决这个问题，我们需要创建一个新的视图函数`search`，它会接收用户的GET请求，并检查`request.GET`字典中是否存在搜索关键词`q`。如果存在，视图会返回一个包含搜索词的响应，否则提示用户提交了空表单。这...
avue-form-design:本项目是一款基于 Avue 的表单设计器，拖拽式操作让你快速构建一个表单
08-04
简介 本项目是一款基于 的表单设计器，拖拽式操作让你快速构建一个表单。 :party_popper: 基于Bladex的工作流插件已上市。 更新日志 文档及demo项目 依赖 element-ui 2.13.2+ $ npm i element-ui @smallwei/avue 2.6.16+ $ npm i @smallwei/avue 或自行引入cdn 安装 组件 $ npm i @sscfaith/avue-form-design 或 $ yarn add @sscfaith/avue-form-design 源码 or $ yarn $ yarn serve html 详见examples 使用 import AvueFormDesign from '@sscfaith/avue-form-design' Vue.use(AvueFormDesign) <avue-form-design style=
avue前端框架-其他
06-12
Avue.js是基于现有的element-ui库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。 浏览器兼容性 支持所有符合ES5标准的浏览器(不支持IE8及以下版本）。     avue前端框架 更新日志： v2.8.12 电脑端 修复 修复Form组件字典dataType属性的问题 修复Form组件首次进来出发验证问题 修复Curd组件二次打开弹框的数据问题 修复Crud组件height高度auto时的问题 修复Crud组件字典筛选的问题 修复Crud组件order排序错乱问题 修复Cascader组件的emitPath属性失效问题 修复Export导出插件的数据0的问题 优化 优化Crud组件和Form组件的defaults属性的 优化Crud组件列拖动问题，只能在弹窗中进行拖拽排序 优化Data数据展示类组件的单独配置decimals属性 新增 新增Form组件smSpan和xsSpan属性 新增Date组件editable属性 新增Map、Table、Icon选择器的dialogWidth弹框宽度属性
Avue中crud和form字典未生效的解决方案
thaibo的博客
03-06 4931
为字段设置的字典采用dicData的方式，在created()方法里获取数据后为dicData赋值，导致字典未起作用。 重点在于，不要改变dicData对象引用！ 下面是错误的写法： created() { this.init(); }, methods: { init() { let opt = Object.assign({}, baseOption);...
avue 字典使用
xiaosi1413的博客
01-10 1894
{ label: "手机号", type: "select", dicUrl: "/api/blade-system/dict/dictionary?code=notice", props: { label: "dictValue", value: "dictKey" }, da
前端那些事20240201-前端那些事-avue2 数据字典 字典使用
qq_41632427的博客
03-18 421
【代码】前端那些事20240201-前端那些事-avue2 数据字典 字典使用。
avue-form表单常用属性和用法
一个憨憨的前端之路
07-30 1万+
个人用法：在vue中可以单独建立一个option.js文件，放置默认的统一参数，在使用的vue组件中引入该文件，设置组件内特殊的参数。 全面参数请参考 avue官方文档 option.js文件 // 默认表单选项 export function formOption (config) { const option = { card: false, size: 'mini', labelWidth: '100', //弹出表单的标题的统一宽度 labelPosition:
AVUE一些简单用法——avue-form表单
热门推荐
sinat_24328329的博客
06-25 1万+
avue-form表单
推荐强大前端表单设计库：Avue-Form-Design
最新发布
gitblog_00082的博客
03-26 735
推荐强大前端表单设计库：Avue-Form-Design avue-form-design本项目是一款基于 Avue 的表单设计器，拖拽式操作让你快速构建一个表单。项目地址:https://gitcode.com/gh_mirrors/avu/avue-form-design 项目简介 是一个基于 Vue.js 的前端组件库，特别关注于动态表单的设计与构建。它提供了一套可视化的设计工具，允许开发...
AVUE表单/单元格校验
m0_52475208的博客
01-06 2943
AVUE中表单及单元格input等进行校验对比
react框架中动态表单如何查询字典接口
05-18
在 React 中，可以通过调用接口获取字典数据，然后将其渲染成下拉选项或者单选框等表单元素。具体实现步骤如下： 1. 在组件中定义一个状态，用于存储字典数据。例如： ```jsx import React, { useState, useEffect } from 'react'; import api from 'path/to/api'; // 导入调用接口的方法 function DynamicForm() { const [options, setOptions] = useState([]); useEffect(() => { // 在组件挂载时获取字典数据 api.getDictionary().then((res) => { setOptions(res.data); }); }, []); return ( <div> <label htmlFor="dict">选择字典：</label> <select id="dict"> {options.map((option) => ( <option key={option.value} value={option.value}> {option.label} </option> ))} </select> </div> ); } ``` 2. 在 `useEffect` 钩子函数中调用接口获取字典数据，并将数据保存到状态中。 3. 在渲染表单时，根据状态中保存的字典数据生成下拉选项或者单选框等表单元素。例如，在上面的代码中使用了 `select` 元素和 `option` 元素来生成下拉选项。 4. 在提交表单时，可以通过获取表单元素的值来获取用户选择的字典项。例如，在上面的代码中可以通过 `document.getElementById('dict').value` 来获取用户选择的字典项的值。 注意：在实际开发中，需要根据接口返回的数据格式和业务需求来调整代码。以上代码仅为示例代码，不能直接使用。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值