vue如何通過某個(gè)字段獲取詳細(xì)信息
通過某個(gè)字段獲取詳細(xì)信息
新增列表后通過name獲取用戶輸入的詳細(xì)信息
用戶輸入買方信息后彈出聯(lián)系信息輸入,確定后列表只顯示買方信息,并可添加多條,要求通過點(diǎn)擊name時(shí)能顯示具體的聯(lián)系信息
//輸入信息后點(diǎn)擊下一步彈出聯(lián)系人信息模板 nextStep(){ ? ? ? ? ? ? ? this.businessBuyer.company=this.receivableAccountsDetailDtos.businessBuyerName ? ? ? ? ? ? ? this.modal1=true ? ? ? }, //輸入聯(lián)系信息后點(diǎn)擊確定,將最開始輸入的信息和模板信息分別保存在一個(gè)新數(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('請(qǐng)完善信息'); ? ? ? ? ? } ? ? ? ? }) ? ? ? }
最后在table里設(shè)置點(diǎn)擊事件
<Table border :data="ReceivableAccountsDetailDtos" :columns="columns" v-if="ReceivableAccountsDetailDtos.length!==0"></Table>
columns:[ { align: 'center', title: '發(fā)運(yùn)方', 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ǔ)交易合同及編號(hào)', 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ā)票號(hào)', 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一個(gè)字段的值按另一個(gè)字段的值 賦值
filters: { formatTypeName(value) { if (_this.form.applyType == '1'){ return '實(shí)體印章刻制'; }else if (_this.form.applyType == '2'){ return '電子印章刻制'; }else if (_this.form.applyType == '3'){ return '印章作廢'; } } }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue動(dòng)態(tài)繪制四分之三圓環(huán)圖效果
這篇文章主要介紹了vue動(dòng)態(tài)繪制四分之三圓環(huán)圖效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了vue2.x 對(duì)象劫持的原理實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05