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 '印章作废';
                }
            }
        }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 如何在 Vue 中使用 Axios 异步请求API

    如何在 Vue 中使用 Axios 异步请求API

    Axios 是 Javascript 中最受欢迎的 HTTP 库之一,我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用,可以用这个小程序学习英语,同时也能从侃爷的话中得到一些启发,而且还可以学习用 Vue 异步请求API,一举多得,何乐而不为呢?
    2021-05-05
  • vue轮播图插件vue-concise-slider的使用

    vue轮播图插件vue-concise-slider的使用

    这篇文章主要介绍了vue轮播图插件vue-concise-slider的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • nuxt3中server routes的使用详解

    nuxt3中server routes的使用详解

    本文主要介绍了nuxt3中server routes的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue服务端渲染页面缓存和组件缓存的实例详解

    本篇文章给大家带来的内容是关于vue服务端渲染页面缓存和组件缓存的介绍(代码),有一定的参考价值,有需要的朋友可以参考一下
    2018-09-09
  • Vue EventBus自定义组件事件传递

    Vue EventBus自定义组件事件传递

    这篇文章主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 浅析vue插槽和作用域插槽的理解

    浅析vue插槽和作用域插槽的理解

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
    2019-04-04
  • 使用vuedraggable实现从左向右拖拽功能

    使用vuedraggable实现从左向右拖拽功能

    这篇文章主要为大家详细介绍了使用vuedraggable实现从左向右拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue项目部署后提示刷新版本的实现代码

    Vue项目部署后提示刷新版本的实现代码

    这篇文章主要给大家介绍了关于Vue项目部署后提示刷新版本的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-06-06
  • vue3新增Teleport的问题

    vue3新增Teleport的问题

    这篇文章主要介绍了vue3新增Teleport的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue实现折叠展开收缩动画效果

    vue实现折叠展开收缩动画效果

    这篇文章主要介绍了vue实现折叠展开收缩动画,通过scrollHeight实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2023-11-11

最新评论