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 來(lái)查詢到值
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-03
vue動(dòng)態(tài)繪制四分之三圓環(huán)圖效果
這篇文章主要介紹了vue動(dòng)態(tài)繪制四分之三圓環(huán)圖效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了vue2.x 對(duì)象劫持的原理實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(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

