因为有些样式要用手风琴效果,然后代码写上之后发现 el-collapse-item里面不能用点击事件,我的代码本来是
<el-collapse :data="menuList" v-for="(menu,index) in menuList" accordion> <el-collapse-item :title="menu.field" @click="details_list(index,menuList)" :name="index" > <div > <el-table :data="details_lis" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="字段" min-width="100%"> <template scope="scope"> <span>{{ scope.row.key }}</span> </template> </el-table-column> <el-table-column align="center" label="参数" min-width="100%"> <template scope="scope"> <span>{{ scope.row.value }}</span> </template> </el-table-column> </el-table> </div> </el-collapse-item> </el-collapse>
哇,怎么试都不行,不停在调位置,然后最后参考了一个segmentfault的多级嵌套的点击事件,发现他的点击事件都是在div标签中写的,于是问题解决,代码如下
<el-collapse :data="menuList" accordion> <div v-for="(menu,index) in menuList" @click="details_list(index,menuList)"> <el-collapse-item :title="menu.field" :name="index" > <div > <el-table :data="details_lis" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="字段" min-width="100%"> <template scope="scope"> <span>{{ scope.row.key }}</span> </template> </el-table-column> <el-table-column align="center" label="参数" min-width="100%"> <template scope="scope"> <span>{{ scope.row.value }}</span> </template> </el-table-column> </el-table> </div> </el-collapse-item> </div> </el-collapse>
