vant如何实现Collapse折叠面板标题自定义

目录

• vant Collapse折叠面板标题自定义
• 使用vant折叠面板自定义内容
• Collapse 折叠面板
• 代码演示

vant Collapse折叠面板标题自定义

vue-cli3+vant实现折叠面板上面标题自定义

代码如下：

使用vant折叠面板自定义内容

效果图：

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
 
Vue.use(Collapse);
Vue.use(CollapseItem);

代码演示

基础用法

通过 v-model 控制展开的面板列表，activeNames 为数组格式。

  内容
  内容
  内容

export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

在基础用法的基础上，因为页面太长，因此需要使用手风琴模式。

手风琴

通过 accordion 可以设置为手风琴模式，最多展开一个面板，此时 activeName 为字符串格式。

  内容
  内容
  内容

export default {
  data() {
    return {
      activeName: '1',
    };
  },
};

基于以上官方文档介绍，下面实现自己的代码逻辑。

 页面渲染：

数据准备:

typelist:[
    {
        type:"医疗设备",
        data:[
            {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"},
            {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"},
            {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"},
            {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"}
        ]
    },
    {
        type:"医疗设备1",
        data:[
            {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备1",type_id: "105"},
            {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备1",type_id: "105"}
        ]
    }   
]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。