element vue動態顯示隱藏列

在使用 Vue.js 和 Element UI 建立頁面時，經常需要使用表格來展示資料。有時候會需要動態顯示或隱藏某些列，使用戶能夠根據自己的需求自訂所需的資訊。 Element UI 提供了方便易用且功能強大的表格元件，本文將著重於如何在 Element UI 表格中動態顯示或隱藏列。

一、基本想法
Element UI 中表格元件提供了 column 對象，每個 column 物件可設定一列的屬性。因此，若要動態顯示或隱藏列，可透過在 column 物件中加入一個 v-if 控制屬性的方式實現。

二、實例分析
此處以 Element UI 當中的 el-table 元件為例，示範如何透過 Vue.js 實作動態顯示或隱藏列。假定我們有一組資料如下圖。其中「編碼」和「狀態」兩個欄位為需要動態顯示或隱藏的欄位。

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. 在script 標籤中加入data 選項，並新增showCode 和showStatus 兩個資料屬性，初始值均為true。

<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 時，列「編碼」隱藏。

四、總結
本文介紹了在 Element UI 表格元件當中如何實作動態顯示或隱藏列。我們只需要在 column 物件中加入一個 v-if 控制屬性，並在相關操作中改變其值，即可輕鬆實現此功能。這種方式可以讓使用者根據需求自由選擇所需的訊息，提高了頁面的靈活性和可自訂性。

以上是element vue動態顯示隱藏列的詳細內容。更多資訊請關注PHP中文網其他相關文章！