需求为当我点击不同的按钮展示不同内容的表格内容(表格可能为一个或多个)
效果图如下:
接口返回的数据结构如下:首先,将我们需要的factor_list数据取出来
this.resultFind = res.data.factor_list
其次,我们对resultFind里的数据进行循环 ,index作为索引值 当我点击不同的按钮(索引)展示不同的内容tableData(添加点击事件),此次按钮我用div展示,给div绑定动态class 当我点击时按钮class为active。
<div
v-for="(item, index) in resultFind"
:key="index"
:class="{ active: index === isActive } || actived"
@click="handleClick(index)"
>
<div class="text">
{{ item.factor_name }}
</div>
</div>
<detail
v-for="(item, index) of tableArrRef"
:key="index"
class="detail"
:is-active="isActive"
:tip-title="item.tipTitle"
:level="item.level"
:table-data="item.tableData"
/>
import detail from './detail.vue';
export default {
components: {
detail,
},
data() {
return {
typeTipMapping,
type: true,
isActive: 0,
resultFind: [],
tableData: [],
tableArrRef: [],
};
},
method:{
handleClick(index) {
this.isActive = index;
this.tableData = this.resultFind[index];
},
}
}
我们在父组件内对数据进行处理,将处理好的数据放到tableArrRef中
watch: {
tableData(val) {
let arr = [];
if (typeof typeTipMapping[val.factor_name] === 'string') {
arr.push({
tipTitle: typeTipMapping[val.factor_name],
tableData: val.details,
level: val.details[0].type,
});
} else {
let s = new Set();
val.details.forEach((o) => {
s.add(o.type);
});
Array.from(s).forEach((o) => {
let tableData = val.details.filter((item) => {
return item.type === o;
});
arr.push({
tipTitle: typeTipMapping[val.factor_name][o],
tableData,
level: o,
});
});
}
this.tableArrRef = arr;
},
},
我们将table表格作为单独的组件引入 。 detail.vue
<div class="common-table">
<div class="color">
<div class="color-piece-two" />
{{ tipTitle }}
</div>
<sti-table
ref="table"
width="100%"
border
:data="tableData"
:pagination="false"
>
<sti-table-column
prop="type"
:label="level"
width="200"
align="center"
>
<template slot-scope="scope">
<span
:style="{
color: colorMapping[scope.row.risk_level]//颜色从colorMapping中取
? colorMapping[scope.row.risk_level]
: '#2E6BE6',
}"
>
{{ scope.row.risk_level }}
</span>
</template>
</sti-table-column>
<sti-table-column label="分值" prop="risk_score" width="150" />
<sti-table-column label="描述" prop="desc" />
</sti-table>
</div>
props: {
isActive: {
type: Boolean,
default: false,
},
tableData: {
type: Array,
default: () => [],
},
tipTitle: {
type: String,
default: '',
},
level: {
type: String,
default: '',
},
},