自己申请一个网站怎么做,垂直网站建设规模,自适应网站开发教程,安顺网站开发原始系统中#xff0c;只有采购量和消耗量#xff0c;需要添加“余”列#xff0c;并自动计算的余量 具体实现通过查询GPT获得#xff1a; 提问#xff1a;
使用antdesign vue的a-table组件做一个互动表#xff0c;每行输入a和b两值#xff0c;计算cab#xf…原始系统中只有采购量和消耗量需要添加“余”列并自动计算的余量 具体实现通过查询GPT获得 提问
使用antdesign vue的a-table组件做一个互动表每行输入a和b两值计算cab然后显示a、b、c
回答
下面是使用 Ant Design Vue 的 a-table 组件创建一个互动表格其中每行输入 a 和 b 的值计算并显示 c a b
templatea-table :dataSourcedata :columnscolumnstemplate v-slot:titleInteractive Table/templatetemplate v-slot:expanded-row{ record }a: a-input-number :valuerecord.a changehandleChange(record, a) /b: a-input-number :valuerecord.b changehandleChange(record, b) /c: {{ record.c }}/template/a-table
/templatescript
export default {data() {return {data: [{ key: 1, a: 0, b: 0, c: 0 },{ key: 2, a: 0, b: 0, c: 0 },{ key: 3, a: 0, b: 0, c: 0 }],columns: [{ title: Key, dataIndex: key },{ title: A, dataIndex: a },{ title: B, dataIndex: b },{ title: C, dataIndex: c }]};},methods: {handleChange(record, field) {record[field] parseFloat(record[field]);record.c record.a record.b;}}
};
/script
在上述示例中我们使用了 a-table 组件来创建表格并使用 :dataSource 和 :columns 属性将数据和列定义传递给表格组件。
在 template v-slot:expanded-row 中我们定义了每行展开的内容。在展开的内容中我们使用 a-input-number 组件来输入 a 和 b 的值。v-model 指令绑定了输入框的值到 record.a 和 record.b使其与数据源中对应的值保持同步。
通过 change 事件监听输入框值的变化调用 handleChange 方法更新数据源中的值并计算 c 的值。最后我们通过插值表达式 {{ record.c }} 显示 c 的结果。
这样每行输入 a 和 b 的值后c 的值会自动计算并显示在表格中。、
提问
限制a-input-number输入的数字保留小数点后两位
回答
要限制 a-input-number 输入的数字保留小数点后两位你可以使用 :precision 属性和 toFixed 方法。
下面是修改后的示例代码
templatea-table :dataSourcedata :columnscolumnstemplate v-slot:titleInteractive Table/templatetemplate v-slot:expanded-row{ record }a: a-input-number :valuerecord.a changehandleChange(record, a) :precision2 /b: a-input-number :valuerecord.b changehandleChange(record, b) :precision2 /c: {{ record.c.toFixed(2) }}/template/a-table
/templatescript
export default {data() {return {data: [{ key: 1, a: 0, b: 0, c: 0 },{ key: 2, a: 0, b: 0, c: 0 },{ key: 3, a: 0, b: 0, c: 0 }],columns: [{ title: Key, dataIndex: key },{ title: A, dataIndex: a },{ title: B, dataIndex: b },{ title: C, dataIndex: c }]};},methods: {handleChange(record, field) {record[field] parseFloat(record[field]);record.c record.a record.b;}}
};
/script
ps
toFixed(2) 是js自带函数
成品代码
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,{ 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 () {}},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}},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开始我犯了两个错误
①把changehandleChange(record)加到了template slotconsumptionShow slot-scopetext, record上应该加到a-input-number上才对。
②data-source数据项没有加如key列编译报错。看了提示信息感觉到不加key程序无法将单行record对应到数组中的具体项无法绑定数组中的数据。有了key才能绑定这与vue标签的v-for属性循环类似。 v-for通过 key 管理状态列表渲染 | Vue.js
