如何通过v-show切换实现点击高级搜索时隐藏div内span除首行外的行

方案1：纯CSS实现（推荐，无需修改现有JS逻辑，适配自动换行布局） #

你现有布局下的v-chip为行内块元素，会自动根据容器宽度换行，只需通过容器高度截断即可实现仅保留首行的效果：

1. 替换原有包裹pills的div的v-show控制逻辑，改为动态绑定class：

<!-- 原来的 <div v-show='isShowPills'> 替换为以下代码 -->
<div :class="['search-pills-wrapper', { 'pills-fold': !isShowPills }]">
  <!-- 原有template和v-chip代码保持不变 -->
</div>

2. 新增对应CSS样式：

.search-pills-wrapper {
  overflow: hidden;
  /* 可根据需求加展开收起过渡动画 */
  transition: max-height 0.25s ease-in-out;
  /* 展开状态下设置足够大的高度容纳所有pills */
  max-height: 999px;
}
.pills-fold {
  /* 该值调整为刚好容纳1行pills的高度，可根据你实际v-chip的高度、margin数值微调 */
  max-height: 36px;
}

3. 现有JS逻辑无需修改，原来的isShowPills状态控制、图标计算逻辑可直接复用。

方案2：JS精确控制（适合需要精确感知行位置的场景） #

如果需要针对跨行的pills做更细致的逻辑控制，可以通过offsetTop判断pills是否在首行之外：

1. 给每个v-chip绑定动态v-show：

<v-chip
  v-if='searchFields[field].value'
  v-show='isShowPills || pillInFirstLine[field]'
  :key='field'
  <!-- 其他原有属性保持不变 -->
>

2. 在JS中新增首行判断逻辑：

data(){
  return {
    isShowPills: true,
    pillInFirstLine: {},
    // 其他原有data
  }
},
mounted() {
  this.calcFirstLinePills()
  window.addEventListener('resize', this.calcFirstLinePills)
},
beforeUnmount() {
  window.removeEventListener('resize', this.calcFirstLinePills)
},
methods: {
  calcFirstLinePills() {
    this.$nextTick(() => {
      const chips = document.querySelectorAll('.searched-field')
      if (!chips.length) return
      const firstLineTop = chips[0].offsetTop
      this.pillInFirstLine = {}
      chips.forEach(chip => {
        const key = chip.getAttribute('key')
        this.pillInFirstLine[key] = chip.offsetTop === firstLineTop
      })
    })
  },
  // 其他原有方法
}

每当pills数量变化时调用calcFirstLinePills更新首行pills的判断即可。

内容的提问来源于stack exchange，提问作者steve_yuri852