您好,登錄后才能下訂單哦!
這篇“Vue表格隱藏行折疊效果如何實現(xiàn)”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue表格隱藏行折疊效果如何實現(xiàn)”文章吧。
實現(xiàn)步驟
在Vue組件的模板中,定義表格的基本結(jié)構(gòu)。使用v-for指令從數(shù)據(jù)源中遍歷渲染表格的行數(shù)據(jù)。其中,需要添加一個綁定click事件的行,用于觸發(fā)行折疊效果。代碼示例如下:
<template> <div> <table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>身高</th> </tr> </thead> <tbody> <tr v-for="(item,index) in tableData" :key="index"> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.height}}</td> <td class="fold" @click="foldRow(index)"></td> </tr> </tbody> </table> </div> </template>
在組件的data屬性中定義變量,用于判斷表格中的行是否需要折疊。并且在初始化組件時,將所有行的狀態(tài)設(shè)置為未折疊。代碼示例如下:
<script> export default { data() { return { tableData: [ { name: '小明', age: '20', height: '180' }, { name: '小紅', age: '19', height: '170' }, { name: '小剛', age: '22', height: '185' }, ], foldArr: [], }; }, created() { this.foldArr = new Array(this.tableData.length).fill(false); }, methods: { foldRow(index) { this.foldArr.splice(index, 1, !this.foldArr[index]); }, }, }; </script>
定義一個折疊行的組件。組件的模板中包含需要折疊的內(nèi)容。當(dāng)某一行需要折疊時,將隱藏內(nèi)容渲染進(jìn)來。組件代碼示例如下:
<template> <div v-show="foldArr[index]"> <p>{{item.intro}}</p> </div> </template> <script> export default { props: ['item', 'index', 'foldArr'], }; </script>
在表格的body中,添加一個包含折疊行組件的tr。通過v-if指令判斷當(dāng)前行是否需要折疊,如果折疊,則渲染折疊行組件。代碼示例如下:
<template> <div> <table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>身高</th> </tr> </thead> <tbody> <tr v-for="(item,index) in tableData" :key="index"> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.height}}</td> <td class="fold" @click="foldRow(index)"></td> </tr> <tr v-for="(item,index) in tableData" :key="index"> <td colspan="4" v-if="foldArr[index]"> <fold-row :item="item" :index="index" :foldArr="foldArr"></fold-row> </td> </tr> </tbody> </table> </div> </template> <script> import FoldRow from '@/components/FoldRow.vue'; export default { components: { FoldRow, }, data() { return { tableData: [ { name: '小明', age: '20', height: '180', intro: '我是小明,今年20歲,身高180cm' }, { name: '小紅', age: '19', height: '170', intro: '我是小紅,今年19歲,身高170cm' }, { name: '小剛', age: '22', height: '185', intro: '我是小剛,今年22歲,身高185cm' }, ], foldArr: [], }; }, created() { this.foldArr = new Array(this.tableData.length).fill(false); }, methods: { foldRow(index) { this.foldArr.splice(index, 1, !this.foldArr[index]); }, }, }; </script>
對于樣式的處理,可以使用CSS進(jìn)行控制。通過設(shè)置.fold的width和height為0,使其無占用空間。通過設(shè)置.fold:before和.fold:after偽元素的樣式,來實現(xiàn)折疊圖標(biāo)的切換。代碼示例如下:
<style lang="scss"> .fold { position: relative; width: 0; height: 0; &:before, &:after { position: absolute; left: 50%; transform: translateX(-50%); content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: #999; transition: all 0.2s ease; } &:before { top: 0; } &:after { bottom: 0; } } .fold.folded:before { transform: translateY(2px) translateX(-50%) rotate(45deg); } .fold.folded:after { transform: translateY(-2px) translateX(-50%) rotate(-45deg); } </style>
以上就是關(guān)于“Vue表格隱藏行折疊效果如何實現(xiàn)”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。