在使用 Vue.js 和 Element UI 建立頁面時，經常需要使用表格來展示資料。有時候會需要動態顯示或隱藏某些列，使用戶能夠根據自己的需求自訂所需的資訊。 Element UI 提供了方便易用且功能強大的表格元件，本文將著重於如何在 Element UI 表格中動態顯示或隱藏列。
一、基本想法
Element UI 中表格元件提供了 column 對象，每個 column 物件可設定一列的屬性。因此，若要動態顯示或隱藏列，可透過在 column 物件中加入一個 v-if 控制屬性的方式實現。
二、實例分析
此處以 Element UI 當中的 el-table 元件為例，示範如何透過 Vue.js 實作動態顯示或隱藏列。假定我們有一組資料如下圖。其中「編碼」和「狀態」兩個欄位為需要動態顯示或隱藏的欄位。
<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><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><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中文網其他相關文章！
