vant 折叠面板,vant 滑动单元格
这篇文章主要介绍了栈如何实现倒塌折叠面板标题自定义，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
垂直塌陷折叠面板标题自定义使用栈折叠面板自定义内容倒塌折叠面板代码演示
vant Collapse折叠面板标题自定义
vue-cli3 vant实现折叠面板上面标题自定义
代码如下：
货车折叠v-model=activeNames
van-collapse-item name=1
模板槽=标题
//以下内容根据需求填充
div class=标题框
div class=标题框顶
差异
粤A2323
/div
23.32元/格
/div
div class=" number " 53454325432/div
/div
/模板
/凡-折叠-项目
/货车-折叠
使用vant折叠面板自定义内容
效果图：
Collapse 折叠面板
介绍
将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。
引入
从“Vue”导入Vue
从"万特"导入{折叠，折叠项目}；
Vue.use(折叠);
vue。使用(折叠项目)；
代码演示
基础用法
通过v型车控制展开的面板列表，活动名称为数组格式。
货车折叠v-model=activeNames
van-collapse-item title=标题1 name=1 内容/凡-折叠-项目
van-collapse-item title=标题2 name=2 内容/凡-折叠-项目
van-collapse-item title=标题3 name=3 内容/凡-折叠-项目
/货车-折叠
导出默认值{
data() {
返回{
activeNames: [1]，
};
},
};
在基础用法的基础上，因为页面太长，因此需要使用手风琴模式。
手风琴
通过手风琴可以设置为手风琴模式，最多展开一个面板，此时活动名称为字符串格式。
厢式折叠v-model=activeName 手风琴
van-collapse-item title=标题1 name=1 内容/凡-折叠-项目
van-collapse-item title=标题2 name=2 内容/凡-折叠-项目
van-collapse-item title=标题3 name=3 内容/凡-折叠-项目
/货车-折叠
导出默认值{
data() {
返回{
活动名称："1",
};
},
};
基于以上官方文档介绍，下面实现自己的代码逻辑。
页面渲染：
van-collapse v-model=活动名称手风琴
van-collapse-item:title= item type :name= item。在typelist中键入“v-for=”( item，index):key=“index”
van-form v-for=(ele，i) in item.data :key=i
van-row gutter=20
van-col span=2
范菲尔德
:name=i 1
:label=i 1
/
/范-科尔
范-科尔斯潘=16
范菲尔德
v-model=ele.name
label-width=16em
:name=ele.name
:label=ele.name
/
/范-科尔
van-col span=6
范菲尔德
v型=元素单位
:name=ele.unit
:label= 单位： ele.unit
/
/范-科尔
范菲尔德
type=digit
v-model=ele.xiaohao
name=消耗数量
标签=消耗数量
/
范菲尔德
type=digit
v-model=ele.kucun
Name=库存数量
标签=“库存数量”
/
范菲尔德
type=digit
v-model=ele.waigou
Name=外部购买
Label=外部采购(新数量)
/
范菲尔德
type=digit
v-model=ele .尚雕
Name=上雕
Label=向上调整(新数量)
/
范菲尔德
type=digit
v-model=ele.juan
来自各方的捐款
Label=各方捐赠(新增数量)
/
范菲尔德
type=textarea
v-model= ele . beiju
Name=备注
Label=备注
/
/van-row
/van-form
/van-折叠-项目
/货车-折叠
数据准备：
类型列表：[
{
类型：“医疗设备”，
数据：[
{名称： 手持红外温度计，名称_id: 21 ，类型：医疗设备，类型_id: 104}，
{名称： 手持红外温度计，名称_id: 21 ，类型：医疗设备，类型_id: 104}，
{名称： 手持红外温度计，名称_id: 21 ，类型：医疗设备，类型_id: 104}，
{名称：手持红外温度计，name_id: 21 ，type:医疗设备，type_id: 104}
]
},
{
类型：“医疗设备1”，
数据：[
{姓名： 手持红外温度计，姓名id: 21 ，类型：医疗设备1 ，类型id: 105}，
{名称：手持红外温度计，name_id: 21 ，type:医疗设备1 ，type_id: 105}
]
}
]
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。