vant怎么实现Collapse折叠面板标题自定义(collapse,vant,开发技术)

vant Collapse折叠面板标题自定义

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

代码如下：

<van-collapsev-model="activeNames"><van-collapse-itemname="1"><templateslot="title">//以下内容根据需求填充<divclass="title-box"><divclass="title-box-top"><div>粤A2323</div><div>￥23.32</div></div><divclass="number">53454325432</div></div></template></van-collapse-item></van-collapse>

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

效果图：

Collapse 折叠面板

介绍

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

引入

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

代码演示

基础用法

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

<van-collapsev-model="activeNames"><van-collapse-itemtitle="标题1"name="1">内容</van-collapse-item><van-collapse-itemtitle="标题2"name="2">内容</van-collapse-item><van-collapse-itemtitle="标题3"name="3">内容</van-collapse-item></van-collapse>

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

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

手风琴

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

<van-collapsev-model="activeName"accordion><van-collapse-itemtitle="标题1"name="1">内容</van-collapse-item><van-collapse-itemtitle="标题2"name="2">内容</van-collapse-item><van-collapse-itemtitle="标题3"name="3">内容</van-collapse-item></van-collapse>

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

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

页面渲染：

<van-collapsev-model="activeNames"accordion><van-collapse-item:title="item.type":name="item.type"v-for="(item,index)intypelist":key="index"><van-formv-for="(ele,i)initem.data":key="i"><van-rowgutter="20"><van-colspan="2"><van-field:name="i+1+''":label="i+1"/></van-col><van-colspan="16"><van-fieldv-model="ele.name"label-width="16em":name="ele.name":label="ele.name"/></van-col><van-colspan="6"><van-fieldv-model="ele.unit":name="ele.unit":label="'单位:'+ele.unit"/></van-col><van-fieldtype="digit"v-model="ele.xiaohao"name="消耗数量"label="消耗数量"/><van-fieldtype="digit"v-model="ele.kucun"name="库存数量"label="库存数量"/><van-fieldtype="digit"v-model="ele.waigou"name="外部购"label="外部购(新增数量)"/><van-fieldtype="digit"v-model="ele.shangdiao"name="上面调"label="上面调(新增数量)"/><van-fieldtype="digit"v-model="ele.juan"name="各方捐"label="各方捐(新增数量)"/><van-fieldtype="textarea"v-model="ele.beizhu"name="备注"label="备注"/></van-row></van-form></van-collapse-item></van-collapse>

数据准备:

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"}]}]