Home > Article > Web Front-end > How to achieve the hidden row folding effect of Vue table
Vue is a popular JavaScript framework for building interactive, high-performance web applications. In Vue applications, tables are common UI components, and it is often necessary to implement hidden row folding effects to improve user experience. This article will introduce a method to achieve the folding effect of hidden rows in Vue tables.
Implementation steps
<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>
<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>
<template> <div v-show="foldArr[index]"> <p>{{item.intro}}</p> </div> </template> <script> export default { props: ['item', 'index', 'foldArr'], }; </script>
<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>
<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>
So far, we have successfully implemented the hidden row folding effect of the Vue table. Through this method, we can easily improve the user experience and make it easier for users to view and manage table data.
The above is the detailed content of How to achieve the hidden row folding effect of Vue table. For more information, please follow other related articles on the PHP Chinese website!