首頁 > 軟體

vue如何通過某個欄位獲取詳細資訊

2022-07-27 18:01:32

通過某個欄位獲取詳細資訊

新增列表後通過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 '印章作廢';
                }
            }
        }

以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。 


IT145.com E-mail:sddin#qq.com