当前位置: 首页 > 知识库问答 >
问题:

vue.js - Ant Design Vue 的 Collapse 折叠面板如何一键展开所有?

公良同
2023-05-20

需求:a-collapse 可以一键展开所有

使用 javascript+vue3+Ant Design Vue 下了下面的代码:

<template>
  <div>
    <a-button @click="expandAll">展开全部</a-button>
    <a-collapse ref="collapse">
      <a-collapse-panel
        v-for="(category, index) in categories"
        :key="index"
        :header="category.name"
      >
        <a-table
          :columns="columns"
          :data-source="category.data"
          :pagination="false"
        ></a-table>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { Collapse, CollapsePanel, Table, Button } from "ant-design-vue";
import axios from "axios";

export default defineComponent({
  components: {
    Collapse,
    CollapsePanel,
    Table,
    Button,
  },
  data() {
    return {
      columns: [
        {
          title: "track_source_id",
          dataIndex: "track_source_id",
          key: "track_source_id",
        },
        {
          title: "clip_source",
          dataIndex: "clip_source",
          key: "clip_source",
        },
        {
          title: "domain_name",
          dataIndex: "domain_name",
          key: "domain_name",
        },
        {
          title: "host_url",
          dataIndex: "host_url",
          key: "host_url",
        },
        {
          title: "description",
          dataIndex: "description",
          key: "description",
        },
      ],
      categories: [
        {
          name: "website",
          data: [],
        },
        {
          name: "image",
          data: [],
        },
        {
          name: "image_search_engine",
          data: [],
        },
        {
          name: "news",
          data: [],
        },
        {
          name: "image_uri",
          data: [],
        },
        {
          name: "novel",
          data: [],
        },
      ],
    };
  },
  mounted() {
    // 使用axios或其他方法从后端接口获取数据,并将其赋值给各个类别的data属性
    // 以下代码仅作为示例,你需要根据实际情况进行修改
    axios
      .get("http://xxxx.cn/list_all_search_engine")
      .then((response) => {
        const data = response.data;
        this.categories[0].data = data.website;
        this.categories[1].data = data.image;
        this.categories[2].data = data.image_search_engine;
        this.categories[3].data = data.news;
        this.categories[4].data = data.image_uri;
        this.categories[5].data = data.novel;
      })
      .catch((error) => {
        console.error(error);
      });
  },
  methods: {
    expandAll() {
      const panels = this.$refs.collapse.getPanels();
      panels.forEach((panel) => {
        panel.isActive = true;
      });
    },
  },
});
</script>

图片.png

点击"展开全部"之后就报错了:

图片.png

ERROR
this.$refs.collapse.getPanels is not a function
expandAll@webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ListCrawlerEngine.vue?vue&type=script&lang=js:79:42
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:287:18
callWithAsyncErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:295:38
emit@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:810:31
get emit/<@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7286:45
handleClick@webpack-internal:///./node_modules/ant-design-vue/es/button/button.js:118:11
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:287:18
callWithAsyncErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:295:38
invoker@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:473:82

共有1个答案

华宏逸
2023-05-20

试试这样:

<template>
  <div>
    <a-button @click="expandAll">展开全部</a-button>
    <a-collapse v-model="activeKeys">
      <a-collapse-panel
        v-for="(category, index) in categories"
        :key="index"
        :header="category.name"
      >
        <a-table
          :columns="columns"
          :data-source="category.data"
          :pagination="false"
        ></a-table>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { Collapse, CollapsePanel, Table, Button } from "ant-design-vue";
import axios from "axios";

export default defineComponent({
  components: {
    Collapse,
    CollapsePanel,
    Table,
    Button,
  },
  data() {
    return {
      activeKeys: [], 
    
    };
  },
  methods: {
    expandAll() {
      this.activeKeys = this.categories.map((_, index) => index);
    },
  },
});
</script>
 类似资料:
  • 介绍 将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。 引入 import { createApp } from 'vue'; import { Collapse, CollapseItem } from 'vant'; const app = createApp(); app.use(Collapse); app.use(CollapseItem); 代码演示 基础用法

  • Collapse 折叠面板 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 默认为手风琴模式,即打开一个,另外所有的都会关闭。可以将u-collapse的accordion设置为false,这样可以允许打开多个面板 <template> <u-collapse> <u-collapse-item :title="

  • 通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 demo <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

  • 基础用法 可同时展开多个面板,面板之间不影响 :::demo render() { const activeName = "1"; return ( <Collapse value={activeName}> <Collapse.Item title="一致性 Consistency" name="1"> <div>与现实生活一致:与现实生活的流程、

  • 通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 [model] 接受一个初始化的数组, 数组中的每一项与 el-collapse-item 的属性 [value] 相对应。 <!-- 可以指定 [(model)] 或 (modelChange) 来获取每次改变的值--> <el-collapse [model]="['1']" notes=" "> <el-collap

  • Collapse 折叠面板 通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 demo <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致:与现实生活的流程、逻辑保持一致