实现展开收起功能最简单的方法！

最新推荐文章于 2024-10-10 09:56:20 发布

小鱼小鱼干

最新推荐文章于 2024-10-10 09:56:20 发布

阅读量2.6k

点赞数

分类专栏：前端踩坑路漫漫文章标签： vue ant design 展开收起

本文链接：https://blog.csdn.net/weixin_43361722/article/details/117663612

版权

前端踩坑路漫漫专栏收录该内容

97 篇文章 7 订阅

订阅专栏

本文介绍了一种使用AntDesign前端框架和Mock数据来实现场景列表的折叠展开功能的方法。通过一个全局变量fold控制显示状态，点击按钮切换展开和收起，v-for循环配合v-if判断决定内容的显示。点击场景触发handleSelectScene事件，记录选中项。

摘要由CSDN通过智能技术生成

系统前端框架为 Ant Design，数据用Mock模拟.

【效果图】
在这里插入图片描述
【思路】
1、用一个全局变量 fold 控制 “ 展开收起 ” 文字和箭头，默认为true展开状态： @click="fold = !fold" ；
2、对于内容：v-for循环时用 v-if 判断每一个 item 的 index，v-if="index<16 || fold" ；

收起状态下： fold = false , 大于一行的容量16个后，index<16 也为false , 第二行的节点不再显示；

点击展开，fold = true，原本隐藏的节点重新显示。

【代码】

<div class="top">
        <div class="left">场景:</div>
        <!-- 展开/收起 -->
        <div class="right">
          <a v-if="sceneList.array.length > 20" @click="fold = !fold" style="margin-right: 34px">
            {{ fold ? "收起" : "展开" }}
            <a-icon :type="fold ? 'up' : 'down'" />
          </a>
        </div>
        <!-- 场景列表 -->
        <div class="center">
          <template v-for="(item, index) in sceneList.array">
            <a-checkable-tag
              v-if="index<16 || fold"
              :key="index"
              :checked="selectedScene == item.id"
              @change="handleSelectScene(item)"
              :class="selectedScene == item.id ? 'tag-disabled-checked' : ''"
              style="margin: 0 25px 0 0;"
            >
              {{ item.scene }}
            </a-checkable-tag>
          </template>
        </div>
      </div>

import Mock from 'mockjs2'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      // 模拟场景
      sceneList: Mock.mock({
        'array|25': [
          {
            'id|+1': 1,
            'scene|+1': ['炒青菜', '炖豆腐', '卤猪蹄', '烧花鸭', '烧子鹅']
          }
        ]
      }),
      selectedScene: '1', // 保存选择的场景
      fold: true, // 场景展开或收起
    }
  },
  mounted () {
    this.showChart()
  },
  methods: {
    // 点击场景触发事件
    handleSelectScene (e) {
      console.log('You are interested in: ' + JSON.stringify(e.id))
      this.selectedScene = JSON.stringify(e.id)
    }
  }
}

.top {
      padding-top: 20px;
      .left {
        width: 75px;
        padding-left: 30px;
        float: left;
      }
      .right {
        width: 110px;
        float: right;
      }
      .center {
        margin: 0px 110px 0px 75px;
        width: 84%;
      }
    }