vxe-form-item 中文本内容更改未刷新的问题

最新推荐文章于 2024-05-28 19:49:43 发布
最新推荐文章于 2024-05-28 19:49:43 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： ui 文章标签： vue.js html javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27048147/article/details/116992101
版权

    近期项目用使用到了vxe-table的表格组件，其中使用到vxe-form表单组件，发现在表单vxe-form-item中绑定文本内容时，动态赋值时变量已修改，但是界面上一直未刷新，

查找API发现表单中的每一项都加上如下代码即可显示：

<vxe-form-item>
    <template v-slot='scope'>
        ......
    </template>
</vxe-form-item>

 

佛系编程,保命要紧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vxe-tablevue 表格解决方案 v2.9.24
11-03
为您提供vxe-tablevue 表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
VXE Form属性改变后不能同时更新到页面的问题
℡メ㏑╭ァ小凯
02-22 683
我想实现，全称改变了，简称显示的值和全称一样，发现没法更新，后面附上解决办法 写个watch监控值改变，然后改变另一个属性 watch: { "formData.gysmc": { handler (val) { this.formData.gysjc = val; }, deep: true } }, 表单这么写无效 <vxe-form-i
Vxe UI vue vxe-form-design 表单设计器、零代码平台
大猩猩X
05-26 481
Vxe UI vxe-form-design 表单设计器、零代码表单设计器， vxe-form-design 设计器组件。vxe-form-view 视图渲染组件。
真 · vue中，input、form中回车提交但不刷新页面的解决方案！
不甘于现状のKK
12-21 1306
项目需要，找了两个多小时资料，可算把这个问题解决了。某度某区某DN有许多解决方案，但是还是解决不了项目的问题。 所以从表单提交源头解决。废话不多说： 解决方法有三种，如果你有两个以上的提交事件或者两个以上文本框，可直接拉到"解决办法三"查看。 解决方法一： 只有一个表单提交 <form @submit.prevent> <!-- 表单内容 --> </form> 解决方法一： 如果有表单提交需要 <form @submit="search"> &l.
vue vxe-table vxe-form 表格，折叠表单，表格校验，动态生成表单，表单配置
热门推荐
大猩猩X
02-08 1万+
查看官网示例：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/fullEdit <vxe-form :data="formData4" title-align="right" title-width="100" @submit="searchEvent" @reset="resetEvent"> <vxe...
css-vxe-form-item中输入框加自定义按钮（校验位置错误）
2301_76671906的博客
03-07 278
vxe-form-item中输入框加自定义按钮
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
05-28
对应 vxe-table v4 版本 Installing npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-...
vxe-table-plugin-menus::deciduous_tree: 基于 vxe-table 的表格插件，提供实用的快捷菜单集
04-13
vxe-table-plugin-menus 基于 的表格插件，提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
vxe-table vue表格解决方案源代码
03-15
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe-table::dolphin: vxe-table vue 表格解决方案
05-11
vxe-table 简体中文|| 一个基于的PC端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等....
vue-form:用Vue编写的简单Web表单应用程序
03-07
语言形式 一个使用Vue构建的简单Web表单应用程序。 现场演示： : 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint
vxe-tablevue表格解决方案 v2.9.26
11-25
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
vxetablevuetable一个功能更加强大的Vue表格组件
08-10
vxe-table vue table
vxe-from验证表格
牛逼的博客
08-28 1581
vxe-from验证 1、在vxe-from中绑定:rules="rules"是必填框。 2、表格验证 rules: { gcmc: [ { required: true, message: “请填写工程名称”, trigger: “blur”, }, { min: 2, max: 30, message: “长度在 2 到 30 个字符”, trigger: “blur”, }, ], }, 3、this.$refs.proForm.validate((valid) => { if (valid)
vxe-form-item中自定义按钮事件触发框
2301_76671906的博客
12-06 516
vxe-form-item中自定义按钮事件触发框
vxe-form 表单中内嵌组件，添加表单校验，校验提示位置错乱
2301_76671906的博客
12-25 673
vxe-form 表单中内嵌组件，添加表单校验，校验提示位置错乱
vxe-form-design 表单设计器的使用
最新发布
我的博客
05-28 571
在 vue3 中表单设计器的使用 vxe-form-design
vxe-form-gather里的vxe-form-item中元素不实时更新
06-07
如果在使用 `vxe-form-gather` 和 `vxe-form-item` 组件时，发现元素不实时更新，可能是因为数据没有绑定到 Vue 实例的响应式系统中。可以尝试以下几种方法解决该问题： 1. 使用 `v-model` 双向绑定数据。例如： ``` <template> <vxe-form-gather ref="form" :data="formData" @submit="onSubmit"> <vxe-form-item label="姓名"> <input v-model="formData.name" /> </vxe-form-item> <vxe-form-item label="年龄"> <input v-model.number="formData.age" /> </vxe-form-item> </vxe-form-gather> </template> <script> export default { data() { return { formData: { name: '', age: '' } } }, methods: { onSubmit() { console.log(this.formData) } } } </script> ``` 在这个例子中，`v-model` 双向绑定了 `formData` 对象中的数据，所以当输入框中的值发生变化时，Vue 会自动更新数据，并使输入框的值实时更新。 2. 使用 `$set` 方法手动更新数据。例如： ``` <template> <vxe-form-gather ref="form" :data="formData" @submit="onSubmit"> <vxe-form-item label="姓名"> <input :value="formData.name" @input="updateFormData('name', $event.target.value)" /> </vxe-form-item> <vxe-form-item label="年龄"> <input :value="formData.age" @input="updateFormData('age', $event.target.value)" /> </vxe-form-item> </vxe-form-gather> </template> <script> export default { data() { return { formData: { name: '', age: '' } } }, methods: { updateFormData(key, value) { this.$set(this.formData, key, value) }, onSubmit() { console.log(this.formData) } } } </script> ``` 在这个例子中，我们使用 `:value` 绑定了输入框的值，然后通过 `@input` 事件来手动更新 `formData` 对象中的数据。使用 `$set` 方法更新数据可以将数据添加到 Vue 实例的响应式系统中，使其实时更新。 3. 使用 `Object.assign` 方法更新数据。例如： ``` <template> <vxe-form-gather ref="form" :data="formData" @submit="onSubmit"> <vxe-form-item label="姓名"> <input :value="formData.name" @input="updateFormData({name: $event.target.value})" /> </vxe-form-item> <vxe-form-item label="年龄"> <input :value="formData.age" @input="updateFormData({age: $event.target.value})" /> </vxe-form-item> </vxe-form-gather> </template> <script> export default { data() { return { formData: { name: '', age: '' } } }, methods: { updateFormData(data) { this.formData = Object.assign({}, this.formData, data) }, onSubmit() { console.log(this.formData) } } } </script> ``` 在这个例子中，我们使用 `Object.assign` 方法更新了 `formData` 对象中的数据，将其合并到一个新的对象中，然后再将其赋值给 `formData` 对象。这样可以将数据添加到 Vue 实例的响应式系统中，使其实时更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值