关于列表里面的链接,点击后可查看文件以及列表数据翻译

1、bootstrap-vue表格里面做文字转译,将后台返回的状态码翻译

<b-table striped bordered hover :items="list" :fields="theads" show-empty empty-text="没有查询到数据" style="text-align:center;table-layout:fixed;">

<template slot="companyName" slot-scope="row">

<span class="tdWidth" :title="row.item.companyName"> {{row.item.companyName}}</span>

</template>

<template slot="gpsStatus" slot-scope="row">

<span v-if="row.item.gpsStatus == 1">无信号</span>

<span v-if="row.item.gpsStatus == 2">过少异常</span>

<span v-if="row.item.gpsStatus == 3">正常</span>

<span v-if="row.item.gpsStatus == 4">过密</span>

</template>

</b-table>

做这个功能的时候,用的不是表格的样式,而是div设置。链接后台接口获取数据。所以写这篇博客算是总结。

2、先是链接后台接口,获取数据。

<div class="car-info-tab">

<ul class="clearfix">

//tab切换

<li class="car-info-tab-item clearfix" v-for="(tab, index) in tabList" :key="index" @click="exchangeTab(index)">

<a :class="{'active': index == actTabIndex}" href="javascript:;">{{tab.name}}</a>

</li>

</ul>

</div>

<div class="tab-pane">

<div class="tab-cont clearfix" v-if="targInfoList && targInfoList.length">

<div class="tab-cont-item" v-for="(item, index) in targInfoList" :key="index">

<div class="tci-key" >{{item.key}}</div>

<div class="tci-value" v-else>{{item.value}}</div>

</div>

</div>

</div>

js:

tabList: [

{ name: '基本信息' },

{ name: '运营规模信息' },

{ name: '支付信息' },

{ name: '服务机构' },

{ name: '经营许可' },

{ name: '计程计价方式' },

{ name: '投资人信息' },

{ name: '联系人信息' },

{ name: '普通企业信息' }

],

carInfoList: [

[

{ key: '公司标识', value: '', name: 'companyId' },

{ key: '企业名称', value: '', name: 'companyName' },

]

]

computed: {

targInfoList() {

return this.carInfoList[this.actTabIndex]

}

},

mounted() {

this.exchangeHight(this.$refs.rfbox)

},

methods: {

exchangeTab(index) {

this.actTabIndex = index

},

获取表格里面的内容:

// 详细信息列表

getdetailCompanyList() {

var data = {

companyId: this.$route.query.companyId

}

api.axios_http(gd.companyFindDetail, data).then(res => {

console.log(res, '平台企业详细信息列表')

this.detailInfoList = res.returnParm

// 基本信息companyInfo

this.companyInfo = res.returnParm.companyInfo

if (this.companyInfo !== null && this.companyInfo !== '') {

this.carInfoList[0].forEach(item => {

item.value = this.companyInfo[item.name]

}) } }) }) }

效果如下:

要实现的功能:

把表格里面的链接设置成按钮,点击后打开链接,显示文件内容。

 

 2.因为列表里经常会有用数字代表状态的数据,后台传过来显示的是数字,我们要对他们进行翻译。

因为不是表格的形式,所以不能在carInfoList里面进行转译,也不能再html里面里进行转译。所以我就在获取列表的事件里面进行处理。

先循环这个数组,拿到他输出的三个值(key、value、name),再循环里面的数值,拿到对应要用的数值,最后编译。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值