关于列表里面的链接，点击后可查看文件以及列表数据翻译
做这个功能的时候，用的不是表格的样式，而是div设置。链接后台接口获取数据。所以写这篇博客算是总结。
1、先是链接后台接口，获取数据。
<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），再循环里面的数值，拿到对应要用的数值，最后编译。