响应式绑定<a-textarea>的内容

项目中的 <a-textarea>组件需要自动填入下方数据表的物品名称+数量+单位,效果如下:

尝试 <a-textarea>{{插值}}</a-textarea>,实现不了,问ai得知需要使用v-decorator 指令的initialValue 属性

问:

如何绑定数据到textarea内容中?

<a-textarea :rows="4" v-decorator="[ 'content', { rules: [{ required: true, message: '请输入名称!' }] } ]"/>

ai答:

对于 Ant Design Vue 中的 <a-textarea> 组件,正确的绑定数据的方式是使用 v-decorator 指令的 initialValue 属性。

<template><a-form :form="form"><a-form-item label="Content" :colon="false" :validate-status="getFieldError('content') ? 'error' : ''":help="getFieldError('content') || ''"><a-textarea :rows="4"v-decorator="['content', { initialValue: content, rules: [{ required: true, message: '请输入内容!' }] }]"></a-textarea></a-form-item><a-form-item><a-button type="primary" @click="submitForm">提交</a-button></a-form-item></a-form>
</template><script>
export default {data() {return {form: this.$form.createForm(this),content: '', // 数据属性用于绑定 <a-textarea> 的内容};},methods: {getFieldError(name) {const errors = this.form.getFieldError(name);if (errors && errors.length > 0) {return errors[0];} return '';},submitForm() {this.form.validateFields((errors, values) => {if (!errors) {// 表单验证通过,执行提交操作// ...}});},},
};
</script>

示例中,我们使用 initialValue 属性将 content 数据属性绑定到 <a-textarea> 的初始值上。这样,当页面加载时,<a-textarea> 的内容将会显示 content 的初始值。同时,当用户输入或修改 <a-textarea> 的内容时,content 的值也会相应地更新。

注意:initialValue表示初始值,如果用户不编辑<a-textarea> 的内容,绑定内容将一直跟随改变,一旦对<a-textarea> 的内容进行了编辑,内容就不再跟随绑定变量改变。

源码:

<template><a-drawertitle="物品入库":maskClosable="false"placement="right":closable="false":visible="show":width="1200"@close="onClose"style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;"><a-form :form="form" layout="horizontal"><a-row :gutter="32"><a-col :span="12"><a-form-item label='保管人' v-bind="formItemLayout"><a-input v-decorator="['custodian',{ rules: [{ required: true, message: '请输入保管人!' }] }]"/></a-form-item></a-col><a-col :span="12"><a-form-item label='入库人' v-bind="formItemLayout"><a-input v-decorator="['putUser',{ rules: [{ required: true, message: '请输入入库人!' }] }]"/></a-form-item></a-col><a-col :span="24"><a-form-item label='备注消息' v-bind="formItemLayout"><a-textarea :rows="4" v-decorator="['content',{ initialValue: txtcontent, rules: [{ required: true, message: '请输入名称!' }] }]"/></a-form-item></a-col><a-col :span="24"><a-table :columns="columns" :data-source="dataList"><template slot="nameShow" slot-scope="text, record"><a-input v-model="record.name"></a-input></template><template slot="typeShow" slot-scope="text, record"><a-input v-model="record.type"></a-input></template><template slot="typeIdShow" slot-scope="text, record"><a-select v-model="record.typeId" style="width: 100%"><a-select-option v-for="(item, index) in consumableType" :value="item.id" :key="index">{{ item.name }}</a-select-option></a-select></template><template slot="unitShow" slot-scope="text, record"><a-input v-model="record.unit"></a-input></template><template slot="amountShow" slot-scope="text, record"><a-input-number v-model="record.amount" :min="1" :step="1" :precision="2" @change="handleChange(record)"/></template><template slot="consumptionShow" slot-scope="text, record"><a-input-number v-model="record.consumption" :min="0" :max="record.amount" :step="1" :precision="2" @change="handleChange(record)"/></template><template slot="priceShow" slot-scope="text, record"><a-input-number v-model="record.price" :min="0"/></template></a-table><a-button @click="dataAdd" type="primary" ghost size="large" style="margin-top: 10px;width: 100%">新增物品</a-button></a-col></a-row></a-form><div class="drawer-bootom-button"><a-popconfirm title="确定放弃编辑?" @confirm="onClose" okText="确定" cancelText="取消"><a-button style="margin-right: .8rem">取消</a-button></a-popconfirm><a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button></div></a-drawer>
</template><script>
import {mapState} from 'vuex'
const formItemLayout = {labelCol: { span: 24 },wrapperCol: { span: 24 }
}
export default {name: 'stockAdd',props: {stockAddVisiable: {default: false}},computed: {...mapState({currentUser: state => state.account.user}),show: {get: function () {return this.stockAddVisiable},set: function () {}},txtcontent () {// const string = JSON.stringify(contentlist)let string = ''this.dataList.forEach(item => {string += item.name + item.amount + item.unit + ' '})return string},columns () {return [{title: '序号',dataIndex: 'key'}, {title: '物品名称',dataIndex: 'name',scopedSlots: {customRender: 'nameShow'}}, {title: '所属类型',dataIndex: 'typeId',width: 200,scopedSlots: {customRender: 'typeIdShow'}}, {title: '型号',dataIndex: 'type',scopedSlots: {customRender: 'typeShow'}}, {title: '采购量',dataIndex: 'amount',scopedSlots: {customRender: 'amountShow'}}, {title: '消耗量',dataIndex: 'consumption',scopedSlots: {customRender: 'consumptionShow'}}, {title: '剩余量',dataIndex: 'balance'}, {title: '单位',dataIndex: 'unit',scopedSlots: {customRender: 'unitShow'}}, {title: '单价',dataIndex: 'price',scopedSlots: {customRender: 'priceShow'}}]}},mounted () {this.getConsumableType()},data () {return {dataList: [],formItemLayout,form: this.$form.createForm(this),loading: false,consumableType: [],keynumber: 1,textareacontent: '备注内容'}},methods: {getConsumableType () {this.$get('/cos/consumable-type/list').then((r) => {this.consumableType = r.data.data})},dataAdd () {this.dataList.push({key: this.keynumber++, name: '', type: '', typeId: '', unit: '', amount: 0, consumption: 0, balance: 0, price: 0})},reset () {this.loading = falsethis.form.resetFields()},onClose () {this.reset()this.$emit('close')},handleChange (record) {record.balance = (record.amount - record.consumption).toFixed(2)},handleSubmit () {let price = 0this.dataList.forEach(item => {price += item.price * item.amount})this.form.validateFields((err, values) => {values.price = pricevalues.goods = JSON.stringify(this.dataList)if (!err) {this.loading = truethis.$post('/cos/stock-info/put', {...values}).then((r) => {this.reset()this.$emit('success')}).catch(() => {this.loading = false})}})}}
}
</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582726.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js数组的方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、push()&&pop() unshift()&&shift()1、push()&#xff1a;向数组的末尾添加一个或多个元素&#xff0c;并返回新的长度2、pop()&#xff1a;删除…

地震烈度速报与预警工程成功案例的经验分享 | TDengine 技术培训班第一期成功落地

近日&#xff0c;涛思数据在成都开设了“国家地震烈度速报与预警工程数据库 TDengine、消息中间件 TMQ 技术培训班”&#xff0c;这次培训活动共分为三期&#xff0c;而本次活动是第一期。其目标是帮助参与者深入了解 TDengine 和 TMQ 的技术特点和应用场景&#xff0c;并学习如…

pybullet安装时出现fatal error C1083: 无法打开包括文件: “string.h”: No such file or directory

pybullet安装时出现fatal error C1083: 无法打开包括文件: “string.h”: No such file or directory 报错原文&#xff1a; -----CloneTreeCreator.cppD:\Program_Professional\Microsoft Visual Studio\2022\BuildTools\VC\Tools\MSVC\14.38.33130\include\cstring(11): fat…

uni-app获取音频播放时长

在uni-app中&#xff0c;你可以使用uni.createInnerAudioContext()来创建一个内部音频上下文&#xff0c;然后通过这个对象来获取音频的播放时长。以下是一个示例代码&#xff1a; // 创建一个内部音频上下文对象 const audioContext uni.createInnerAudioContext();// 设置要…

腾讯云服务器如何买(购买腾讯云服务器的详细步骤)

腾讯云服务器购买流程直接在官方秒杀活动上购买比较划算&#xff0c;在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵&#xff0c;但是自定义购买云服务器CPU内存带宽配置选择范围广&#xff0c;活动上购买只能选择固定的活动机&#xff0c;选择范围窄&#xff0c;但是…

canal 数据同步组件

canal 数据异构组件 为啥要使用这个组件&#xff1f; 在更新DB的时候不同步更新到redis&#xff0c;es等数据库中&#xff0c;时间太久&#xff0c;而且可能会存在同步失败的问题&#xff0c;因此引入canal去拉取DB的数据&#xff0c;再去更新到redis&#xff0c;es等数据库中&…

LeetCode刷题笔记之字符串

一、反转字符串 1. 344【反转字符串】 **题目&#xff1a;**编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。代码&am…

python初试六

之前了解了&#xff1a; 创建Django项目 数据库 模板 表格提交 admin管理页面 上面的功能模块允许我们做出一个具有互动性的站点&#xff0c;但无法验证用户的身份。我们这次了解用户验证部分。通过用户验证&#xff0c;我们可以根据用户的身份&#xff0c;提供不同的服务。 …

TiDB SQL调优案例TiFlash

背景 早上收到某系统的告警tidb节点挂掉无法访问&#xff0c;情况十万火急。登录中控机查了一下display信息&#xff0c;4个TiDB、Prometheus、Grafana全挂了&#xff0c;某台机器hang死无法连接&#xff0c;经过快速重启后集群恢复&#xff0c;经排查后是昨天上线的某个SQL导…

openwrt源码编译

下载openwrt源码 git clone https://github.com/openwrt/chaos_calmer.git // 官方下载地址 当前我们基于15.05版本开发&#xff0c;如果开发者想用最新的OpenWRT系统&#xff0c;可以下载 https://github.com/openwrt/openwrt.git git clone https://github.com/Ying-Yun/o…

OpenGL 绘制Mesh数据(Qt)

文章目录 一、简介二、实现代码三、实现效果一、简介 Mesh数据的结构主要就是点与三角面片,因此本质上仍然是对三角面片进行绘制。这里我们借助VCG这个库实现对Mesh数据的读取,这个库相对简单轻巧,很方便使用。 二、实现代码 由于修改的部分很多,我们逐一进行解释一下: --…

Seata 中封装了四种分布式事务模式,分别是: AT 模式, TCC 模式, Saga 模式, XA 模式,

文章目录 seata概述Seata 中封装了四种分布式事务模式&#xff0c;分别是&#xff1a;AT 模式&#xff0c;TCC 模式&#xff0c;Saga 模式&#xff0c;XA 模式&#xff0c; 今天我们来聊聊seata seata 概述 在微服务架构下&#xff0c;由于数据库和应用服务的拆分&#xff0c…

计算机专业校招常见面试题目总结

博主面试岗位包括&#xff1a;java开发、软件测试、测试开发等岗位&#xff0c;基于之前经历的面试总结出的一些常见题目。仅供参考&#xff0c;互相学习&#xff01;&#xff01; 八股&#xff1a;java开发、测试、测开岗位 Java技术栈&#xff1a;Java基础、JVM、数据结构、…

【SAM系列】Auto-Prompting SAM for Mobile Friendly 3D Medical Image Segmentation

论文链接&#xff1a;https://arxiv.org/pdf/2308.14936.pdf 核心&#xff1a; finetune SAM,为了不依赖外部prompt&#xff0c;通过将深层的特征经过一个编-解码器来得到prompt embedding&#xff1b;finetune完之后做蒸馏

PTA-感染人数

设某住宿区域是一个nn的方阵&#xff0c;方阵中的每个小方格为一个房间&#xff0c;房间里可能住一个人&#xff0c;也可能空着。第一天&#xff0c;某些房间中住着的人得了一种高传染性的流感&#xff0c;以后每一天&#xff0c;得流感的人会使其邻居&#xff08;住在其上、下…

76 Python开发-内外网收集Socket子域名DNS

目录 Python开发相关知识点本篇文章涉及知识点演示案例:IP&Whois&系统指纹获取代码段-外网CDN&子域名&端口扫描&交互代码段-外网IP&计算机名&存活主机&端口扫描代码段-内网Py格式解析环境与可执行程序格式转换-Pyinstaller 涉及资源&#xff1…

git 学习 之一个规范的 commit 如何写

最好的话做一件完整的事情就提交一次

WPF 显示gif动态图

WPF显示gif动态图有以下几种方式&#xff1a; 使用Storyboard使用WpfAnimatedGif(NuGet包管理器安装WpfAnimatedGif)使用ImageAnimator使用Winform控件PictureBox使用MediaElement通过GifBitmapDecoder解析GIF图片&#xff0c;获取gif帧数和每一帧数据&#xff0c;然后通过时间…

一种删除 KubeSphere 中一直卡在 Terminating 的 Namespace--KubeSphere Logging System的简单方法

文章目录 一、问题提出二、删除方法1&#xff0c;获取kubesphere-logging-syste的详细信息json文件2&#xff0c;编辑kubesphere-logging-system.json3&#xff0c;执行清理命令 三、检查结果 一、问题提出 在使用 KubeSphere 的时候发现有一个日志服务KubeSphere Logging Sys…

ARM CCA机密计算软件架构之设备分配(Device Assignment)

这个指南的前几节展示了领域提供的执行环境,它与正常世界的Rich OS、Hypervisor和TrustZone完全隔离。领域可以在初始化时完全通过认证,以确保其初始内容,并确保它在基于RME的平台上运行。 在大多数操作情况下,任何领域软件执行都需要访问系统中可用的设备。默认情况下,系…