vue2 点击按钮高亮显示不同项，再次点击隐藏相同项
<template>
<div class="warpBox"
<div class="productBox product-center">
<div class="supplier-table">
<table>
<tr>
<td class="rowtd"><b>商品图片</b></td>
<td class="rowtd" v-for="item in list" :key="item.tp">
<p @click="handRowdel(item)" class="zwAdd">删除</p>
<img :src="url + item.tp" class="rowImg" />
</td>
</tr>
<tr
:class="{
highlight: showDiff && !spmcSame,
normal: !showDiff || spmcSame,
}"
v-show="showVisdata || !spmcVisible"
>
<td class="rowtd"><b>商品1</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
<span @click="sptoDetail(item)" class="spmcFont">
{{ item.spmc }}
</span>
</td>
</tr>
<tr
:class="{
highlight: showDiff && !spbhSame,
normal: !showDiff || spbhSame,
}"
v-show="showVisdata || !spbhVisible"
>
<td class="rowtd"><b>商品2</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
{{ item.spbh }}
</td>
</tr>
<tr
:class="{
highlight: showDiff && !zgjgSame,
normal: !showDiff || zgjgSame,
}"
v-show="showVisdata || !zgjgVisible"
>
<td class="rowtd"><b>商品3</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
{{ item.zgjg ? "￥" + item.zgjg : "" }}
</td>
</tr>
<tr
:class="{
highlight: showDiff && !spdwSame,
normal: !showDiff || spdwSame,
}"
v-show="showVisdata || !spdwVisible"
>
<td class="rowtd"><b>商品4</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
{{ item.danwei }}
</td>
</tr>
<tr
:class="{
highlight: showDiff && !spppSame,
normal: !showDiff || spppSame,
}"
v-show="showVisdata || !spppVisible"
>
<td class="rowtd"><b>商品5</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
{{ item.pp }}
</td>
</tr>
<tr
:class="{
highlight: showDiff && !spmsSame,
normal: !showDiff || spmsSame,
}"
v-show="showVisdata || !spmsVisible"
>
<td class="rowtd"><b>商品6</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
{{ item.spms }}
</td>
</tr>
<tr
:class="{
highlight: showDiff && !gysSame,
normal: !showDiff || gysSame,
}"
v-show="showVisdata || !gysVisible"
>
<td class="rowtd"><b>商品7</b></td>
<td class="rowtd" v-for="(item, index) in list" :key="index">
{{ item.meifmena }}
</td>
</tr>
</table>
</div>
<div
:class="{
hoverSpbtn: spiconShow,
wrapbtn: !spiconShow,
}"
>
<div>
<el-button @click="btspShow()">{{ showDiffText }}</el-button>
<el-button @click="visibleShow()">{{ showvisibleText }}</el-button>
</div>
</div>
<SdpFooter />
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
listLoading: false,
str: "",
meifmena: "",
bz: "",
search: "",
};
},
created() {
},
computed: {
showDiffText() {
return this.showDiff ? "取消 不同项" : " 显示不同项";
},
showvisibleText() {
return this.showVisdata ? "隐藏相同项" : "显示相同项";
},
},
mounted() {
this.checkDifference();
},
methods: {
checkDifference() {
if (this.list.length === 0) return;
const first = this.list[0];
},
btspShow() {
this.checkDifference();
this.showDiff = !this.showDiff;
},
// 隐藏相同项
visibleShow() {
this.getVisible();
this.showVisdata = !this.showVisdata;
},
getVisible() {
if (this.list.length === 0) return;
const first = this.list[0]
},
spdbPosition() {
this.spiconShow = !this.spiconShow;
},
},
};
</script>
<style>
</style>