簡易實現-vuejs資料超出單行顯示更多,點選展開剩餘資料
阿新 • • 發佈:2022-05-19
## 預設展示一行,點選箭頭展開更多,設定最大高度,超出顯示滾動條
欄位解釋:dataList為後臺介面請求的選項資料,showAll是否展示全部(型別陣列,長度跟dataList相等,屬性預設false)
<i>標籤收起展開按鈕,點選事件傳入行的index,標記點選了哪一行進行展開,showAll需要整體替換才能觸發vue的資料響應式
##樣式部分
字型行高36,預設資料行高36,overflow:hidden隱藏,點選展開設為height:auto
<template> <div> <el-row v-for="(item,index) in dataList" :key="index"> <el-col :span="1">{{item.name}}</el-col> <el-col :span="21" class="items" :class="[showAll[index]?'show':'hide']"> <span v-for="(subItem,index1) in item.contents" :key="index1" class="item">{{subItem}}</span> </el-col> <el-col :span="1">多選</el-col> <el-col :span="1"> <i class="el-icon-arrow-down" @click="showItem(index)"></i> </el-col> </el-row> </div> </template> <script> import {mallGoodsAttributeList} from '@/api/goods' export default { name: 'GoodsFilter', data () { return { dataList: [], showAll: [] } }, mounted () { this.getList() }, methods: { getList () { mallGoodsAttributeList().then(res => { res.data.forEach(item => { item.contents = item.content.split(',') this.showAll.push(false) }) this.dataList = res.data console.log(this.dataList) }) }, showItem (index) { this.showAll.splice(index, 1, !this.showAll[index]) } } } </script> <style lang="scss" scoped> .el-col{ line-height: 36px; } .items{ display: flex; flex-wrap: wrap; max-height: 260px; &.hide{ height: 36px; overflow: hidden; } &.show{ height: auto; overflow-y: scroll; } } .item{ margin-right: 10px; } </style>