vue如何通過某個字段獲取詳細(xì)信息
更新時間:2022年07月27日 14:22:25 作者:巖崎理奈
這篇文章主要介紹了vue如何通過某個字段獲取詳細(xì)信息,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
通過某個字段獲取詳細(xì)信息
新增列表后通過name獲取用戶輸入的詳細(xì)信息
用戶輸入買方信息后彈出聯(lián)系信息輸入,確定后列表只顯示買方信息,并可添加多條,要求通過點擊name時能顯示具體的聯(lián)系信息
//輸入信息后點擊下一步彈出聯(lián)系人信息模板 nextStep(){ ? ? ? ? ? ? ? this.businessBuyer.company=this.receivableAccountsDetailDtos.businessBuyerName ? ? ? ? ? ? ? this.modal1=true ? ? ? }, //輸入聯(lián)系信息后點擊確定,將最開始輸入的信息和模板信息分別保存在一個新數(shù)組里,保存成功后清空之前填入的信息 ? ? ? 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里設(shè)置點擊事件
<Table border :data="ReceivableAccountsDetailDtos" :columns="columns" v-if="ReceivableAccountsDetailDtos.length!==0"></Table>
columns:[ { align: 'center', title: '發(fā)運方', key: 'businessBuyerName', render: (h, params) => {return h('div', { style: { color: '#4169E1' }, on: { click: () => { this.dialogVisible=true //在聯(lián)系信息數(shù)組里通過尋找相同name 來查詢到值 this.result=this.BusinessBuyer.find(function (obj) { return obj.company === params.row.businessBuyerName }) } } },params.row.businessBuyerName) } }, { align: 'center', title: '基礎(chǔ)交易合同及編號', key: 'contractNo', }, { align: 'center', title: '發(fā)票金額', key:'invoiceAmount', render: (h, params) => { return h('div', { style: { color: 'red' } }, params.row.invoiceAmount) } }, { align: 'center', title: '發(fā)票開具日', key: 'invoiceAt', render: (h, params) => { return h('div', [ h('span', this.$moment(params.row.invoiceAt).format('YYYY-MM-DD')) ]); } }, { align: 'center', title: '發(fā)票號', key:'invoiceNumber', }, { align: 'center', title: '應(yīng)收賬款到期日', key: 'limitedAt', render: (h, params) => { return h('div', [ h('span', this.$moment(params.row.limitedAt).format('YYYY-MM-DD')) ]); } }, { align: 'center', title: '應(yīng)收賬款金額', key:'receivableAmount', render: (h, params) => { return h('div', { style: { color: 'red' } },params.row.receivableAmount) } }, { align: 'center', title: '應(yīng)收賬款種類', 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 '印章作廢'; } } }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue異步更新DOM及$nextTick執(zhí)行機制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11