요소 vue는 숨겨진 열을 동적으로 표시합니다.

Vue.js 및 Element UI를 사용하여 페이지를 구축할 때 데이터를 표시하기 위해 테이블을 사용해야 하는 경우가 많습니다. 사용자가 필요에 따라 필요한 정보를 사용자 정의할 수 있도록 특정 열을 동적으로 표시하거나 숨기는 것이 필요한 경우도 있습니다. Element UI는 편리하고 사용하기 쉬우며 강력한 테이블 구성 요소를 제공합니다. 이 기사에서는 Element UI 테이블에서 열을 동적으로 표시하거나 숨기는 방법에 중점을 둡니다.

1. 기본 개념
Element UI의 테이블 구성 요소는 열 개체를 제공하며, 각 열 개체는 열의 속성을 설정할 수 있습니다. 따라서 열을 동적으로 표시하거나 숨기려면 v-if 제어 속성을 열 개체에 추가하면 됩니다.

2. 예제 분석
여기에서는 Vue.js를 통해 열을 동적으로 표시하거나 숨기는 방법을 보여주기 위해 Element UI의 el-table 구성 요소를 예로 들어 보겠습니다. 아래와 같은 데이터 세트가 있다고 가정해 보겠습니다. "인코딩" 및 "상태" 열은 동적으로 표시하거나 숨겨야 하는 열입니다.

1. 먼저 테이블 템플릿에 다음 코드를 추가합니다.

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>

2. 스크립트 태그에 데이터 옵션을 추가하고 초기 값이 true인 showCode 및 showStatus라는 두 개의 데이터 속성을 추가합니다.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>

3. 마지막으로 클릭 이벤트의 showCode 및 showStatus 값을 변경하여 열을 동적으로 표시하거나 숨길 수 있습니다. 예:

<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

"인코딩 표시/숨기기" 버튼을 클릭하면 아래와 같은 효과를 볼 수 있습니다. showCode 값이 true이면 "인코딩" 열이 표시되고, showCode 값이 false이면 "인코딩" 열이 숨겨집니다.

4. 요약
Element UI 테이블 컴포넌트에서 열을 동적으로 표시하거나 숨기는 방법을 소개합니다. 이 기능을 쉽게 구현하려면 열 개체에 v-if 제어 속성을 추가하고 관련 작업에서 해당 값을 변경하기만 하면 됩니다. 이 방법을 사용하면 사용자는 필요에 따라 필요한 정보를 자유롭게 선택할 수 있으므로 페이지의 유연성과 사용자 정의 가능성이 향상됩니다.

위 내용은 요소 vue는 숨겨진 열을 동적으로 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!