vue2 点击按钮高亮显示不同项,再次点击隐藏相同项

发布于:2025-06-26 ⋅ 阅读:(20) ⋅ 点赞:(0)

<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>


网站公告

今日签到

点亮在社区的每一天
去签到