vue如何通过某个字段获取详细信息
更新时间:2022年07月27日 14:22:25 作者:岩崎理奈
这篇文章主要介绍了vue如何通过某个字段获取详细信息,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
通过某个字段获取详细信息
新增列表后通过name获取用户输入的详细信息
用户输入买方信息后弹出联系信息输入,确定后列表只显示买方信息,并可添加多条,要求通过点击name时能显示具体的联系信息
//输入信息后点击下一步弹出联系人信息模板 nextStep(){ this.businessBuyer.company=this.receivableAccountsDetailDtos.businessBuyerName this.modal1=true }, //输入联系信息后点击确定,将最开始输入的信息和模板信息分别保存在一个新数组里,保存成功后清空之前填入的信息 confirmAdd(name){ this.$refs[name].validate((valid) => { if (valid) { var money = Number(this.receivableAccountsDetailDtos.receivableAmount) this.financingMoney +=money seqNumlength +=1 this.receivableAccountsDetailDtos.seqNum=seqNumlength this.ReceivableAccountsDetailDtos.push(this.receivableAccountsDetailDtos) this.BusinessBuyer.push(this.businessBuyer) this.modal1=false this.receivableAccountsDetailDtos={ businessBuyerName:'', contractNo: '', invoiceAmount: null, invoiceAt: '', invoiceNumber: '', limitedAt: '', receivableAmount: null, seqNum: null, type: '' } this.businessBuyer={ address: '', company: '', creditCode: '', financeManMobileNum: '', financeManName: '', financeManTelephoneNum: '', legalPersonName: '', linkManName:'', linkManPhone: '', realInstitute: '', regCapitalCurrency: '' } this.showButton=false this.showReceivable=false this.showButton1=false this.BuyerShow=true }else{ this.$Message.error('请完善信息'); } }) }
最后在table里设置点击事件
<Table border :data="ReceivableAccountsDetailDtos" :columns="columns" v-if="ReceivableAccountsDetailDtos.length!==0"></Table>
columns:[ { align: 'center', title: '发运方', key: 'businessBuyerName', render: (h, params) => {return h('div', { style: { color: '#4169E1' }, on: { click: () => { this.dialogVisible=true //在联系信息数组里通过寻找相同name 来查询到值 this.result=this.BusinessBuyer.find(function (obj) { return obj.company === params.row.businessBuyerName }) } } },params.row.businessBuyerName) } }, { align: 'center', title: '基础交易合同及编号', key: 'contractNo', }, { align: 'center', title: '发票金额', key:'invoiceAmount', render: (h, params) => { return h('div', { style: { color: 'red' } }, params.row.invoiceAmount) } }, { align: 'center', title: '发票开具日', key: 'invoiceAt', render: (h, params) => { return h('div', [ h('span', this.$moment(params.row.invoiceAt).format('YYYY-MM-DD')) ]); } }, { align: 'center', title: '发票号', key:'invoiceNumber', }, { align: 'center', title: '应收账款到期日', key: 'limitedAt', render: (h, params) => { return h('div', [ h('span', this.$moment(params.row.limitedAt).format('YYYY-MM-DD')) ]); } }, { align: 'center', title: '应收账款金额', key:'receivableAmount', render: (h, params) => { return h('div', { style: { color: 'red' } },params.row.receivableAmount) } }, { align: 'center', title: '应收账款种类', key:'type', }, { align: 'center', title: '操作', key:'', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'error', size: 'small' }, style: { marginRight: '5px' }, on: { click: () => { for (var i = 0; i < this.ReceivableAccountsDetailDtos.length; i++) { if (this.ReceivableAccountsDetailDtos[i].businessBuyerName == params.row.businessBuyerName) { this.ReceivableAccountsDetailDtos.splice(i, 1) } } if(this.ReceivableAccountsDetailDtos.length==0){ this.showReceivable =true this.showButton =true } } } },'删除') ]); } }, ]
vue一个字段的值按另一个字段的值 赋值
filters: { formatTypeName(value) { if (_this.form.applyType == '1'){ return '实体印章刻制'; }else if (_this.form.applyType == '2'){ return '电子印章刻制'; }else if (_this.form.applyType == '3'){ return '印章作废'; } } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
最新评论