Vue 테이블의 숨겨진 행 접기 효과를 얻는 방법

Vue는 대화형 고성능 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue 애플리케이션에서 테이블은 일반적인 UI 구성 요소이며 사용자 경험을 개선하기 위해 숨겨진 행 접기 효과를 구현해야 하는 경우가 많습니다. 이 기사에서는 Vue 테이블에서 숨겨진 행의 접기 효과를 얻는 방법을 소개합니다.

구현 단계

1. Vue 구성 요소의 템플릿에서 테이블의 기본 구조를 정의합니다. v-for 지시문을 사용하여 데이터 소스에서 렌더링된 테이블의 행 데이터를 순회합니다. 그중에서 행 접기 효과를 트리거하려면 클릭 이벤트에 바인딩된 행을 추가해야 합니다. 코드 예제는 다음과 같습니다.

<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>

2. 구성요소의 데이터 속성에 변수를 정의하여 테이블의 행을 접어야 하는지 여부를 결정합니다. 그리고 컴포넌트를 초기화할 때 모든 행의 상태를 펼쳐진 상태로 설정합니다. 코드 예제는 다음과 같습니다.

<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>

3. 행을 축소하는 구성 요소를 정의합니다. 구성요소의 템플릿에는 축소해야 하는 콘텐츠가 포함되어 있습니다. 행을 접어야 하는 경우 숨겨진 콘텐츠가 렌더링됩니다. 컴포넌트 코드 예시는 다음과 같습니다.

<template>
  <div v-show="foldArr[index]">
    <p>{{item.intro}}</p>
  </div>
</template>

<script>
export default {
  props: ['item', 'index', 'foldArr'],
};
</script>

4. 테이블 본문에 접힌 행 컴포넌트가 포함된 tr을 추가합니다. v-if 명령을 사용하여 현재 행을 접어야 하는지 여부를 결정합니다. 접힌 경우 접힌 행 구성 요소를 렌더링합니다. 코드 예시는 다음과 같습니다.

<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>

5. 스타일 처리는 CSS를 이용해 제어할 수 있습니다. .fold의 너비와 높이를 0으로 설정하면 공간을 차지하지 않습니다. .fold:before 및 .fold:after 의사 요소의 스타일을 설정하면 접기 아이콘을 전환할 수 있습니다. 코드 예시는 다음과 같습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!