vue+element el-collapse动态获取后台传值
vue+element el-collapse动态获取后台传值
·
菜鸟初学者,第一次使用,记录一下,要是有哪块写的不对,还希望各位大佬多多指教~
el-collapse不是写死的,显示后台传过来的数据
<el-collapse> <el-collapse-item v-for ="(item,index) in companyList " :key='index' > <template slot="title"> <span style="float:left;font-weight:bold;font-size:14px;color:#2C8DF4;">{{item.ggName}}</span> </template> {{item.comments}} <div>附件地址:<a :href="item.fjAddress" target="_blank">{{item.fjAddress}}</a> </div> <div>上传人:{{item.uploadBy}}</div> <div>上传时间:{{item.uploadDate}} </div> </el-collapse-item> </el-collapse>
data() { return { companyList:[], };
created() { this.getList(); },
getList() { listGongg(this.queryParams).then(response => { this.companyList = response.rows; }); },
1.为了实现多条数据循环展示,加了个v-for ="(item,index) in companyList
companyList 是从后台取回来的数组
item是循环后,每个单独的值
2.为了在折叠面板上,显示标题
<template slot="title"> {{item.ggName}}</template>
不太懂,查了说 template是模板,slot是插槽,具体看这篇(可以吧,不涉及侵权吧,侵权删)
vue之template标签及插槽slot_懒人修的博客-CSDN博客_template v-slot
3.data里要返回companyList
4.因为是放在首页,一打开页面就要取到值来显示,所以方法要放到create里
暂时这样,还有落下的,以后补
更多推荐
已为社区贡献2条内容
所有评论(0)