h5手机网站开发,dw里面怎么做网站轮播图,做大型网站需要多少钱,2023最火的十大新闻项目中的 a-textarea组件需要自动填入下方数据表的物品名称数量单位#xff0c;效果如下#xff1a; 尝试 a-textarea{{插值}}/a-textarea#xff0c;实现不了#xff0c;问ai得知需要使用v-decorator 指令的initialValue 属性 问#xff1a; 如何…
项目中的 a-textarea组件需要自动填入下方数据表的物品名称数量单位效果如下 尝试 a-textarea{{插值}}/a-textarea实现不了问ai得知需要使用v-decorator 指令的initialValue 属性 问 如何绑定数据到textarea内容中 a-textarea :rows4 v-decorator[ content, { rules: [{ required: true, message: 请输入名称! }] } ]/ ai答 对于 Ant Design Vue 中的 a-textarea 组件正确的绑定数据的方式是使用 v-decorator 指令的 initialValue 属性。 templatea-form :formforma-form-item labelContent :colonfalse :validate-statusgetFieldError(content) ? error : :helpgetFieldError(content) || a-textarea :rows4v-decorator[content, { initialValue: content, rules: [{ required: true, message: 请输入内容! }] }]/a-textarea/a-form-itema-form-itema-button typeprimary clicksubmitForm提交/a-button/a-form-item/a-form
/templatescript
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 的内容进行了编辑内容就不再跟随绑定变量改变。 源码
templatea-drawertitle物品入库:maskClosablefalseplacementright:closablefalse:visibleshow:width1200closeonClosestyleheight: calc(100% - 55px);overflow: auto;padding-bottom: 53px;a-form :formform layouthorizontala-row :gutter32a-col :span12a-form-item label保管人 v-bindformItemLayouta-input v-decorator[custodian,{ rules: [{ required: true, message: 请输入保管人! }] }]//a-form-item/a-cola-col :span12a-form-item label入库人 v-bindformItemLayouta-input v-decorator[putUser,{ rules: [{ required: true, message: 请输入入库人! }] }]//a-form-item/a-cola-col :span24a-form-item label备注消息 v-bindformItemLayouta-textarea :rows4 v-decorator[content,{ initialValue: txtcontent, rules: [{ required: true, message: 请输入名称! }] }]//a-form-item/a-cola-col :span24a-table :columnscolumns :data-sourcedataListtemplate slotnameShow slot-scopetext, recorda-input v-modelrecord.name/a-input/templatetemplate slottypeShow slot-scopetext, recorda-input v-modelrecord.type/a-input/templatetemplate slottypeIdShow slot-scopetext, recorda-select v-modelrecord.typeId stylewidth: 100%a-select-option v-for(item, index) in consumableType :valueitem.id :keyindex{{ item.name }}/a-select-option/a-select/templatetemplate slotunitShow slot-scopetext, recorda-input v-modelrecord.unit/a-input/templatetemplate slotamountShow slot-scopetext, recorda-input-number v-modelrecord.amount :min1 :step1 :precision2 changehandleChange(record)//templatetemplate slotconsumptionShow slot-scopetext, recorda-input-number v-modelrecord.consumption :min0 :maxrecord.amount :step1 :precision2 changehandleChange(record)//templatetemplate slotpriceShow slot-scopetext, recorda-input-number v-modelrecord.price :min0//template/a-tablea-button clickdataAdd typeprimary ghost sizelarge stylemargin-top: 10px;width: 100%新增物品/a-button/a-col/a-row/a-formdiv classdrawer-bootom-buttona-popconfirm title确定放弃编辑 confirmonClose okText确定 cancelText取消a-button stylemargin-right: .8rem取消/a-button/a-popconfirma-button clickhandleSubmit typeprimary :loadingloading提交/a-button/div/a-drawer
/templatescript
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})}})}}
}
/scriptstyle scoped/style
