Vue는 대화형 고성능 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue 애플리케이션에서 테이블은 일반적인 UI 구성 요소이며 사용자 경험을 개선하기 위해 숨겨진 행 접기 효과를 구현해야 하는 경우가 많습니다. 이 기사에서는 Vue 테이블에서 숨겨진 행의 접기 효과를 얻는 방법을 소개합니다.
구현 단계
<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>
지금까지 Vue 테이블의 숨겨진 행 접기 효과를 성공적으로 구현했습니다. 이 방법을 통해 사용자 경험을 쉽게 개선하고 사용자가 테이블 데이터를 더 쉽게 보고 관리할 수 있도록 할 수 있습니다.
위 내용은 Vue 테이블의 숨겨진 행 접기 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!