溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關vue項目中如何使用iview 隱藏Table組件里的列，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
1、假設我要隱藏columns里的 “賬戶組名稱”
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '賬號ID',
key: 'accountIdString'
},
{
title: '賬號名稱',
key: 'accountName'
},
{
title: '賬戶組名稱',
key: 'accountGroupName'
}]2、根據各自需求去判斷
示例：如果是單賬戶表標題顯示"賬號ID、賬號名稱" 如果是賬戶組表標題顯示"賬戶組名稱"
if(this.queryCostComparisonData[i].accountGroupName){
this.columns = this.columns.filter(col => col.key !== 'accountIdString' );
this.columns = this.columns.filter(col => col.key !== 'accountName' );
}else{
this.columns = this.columns.filter(col => col.key !== 'accountGroupName' );
}補充知識：vue——動態控制表格列的顯示和隱藏
如下所示：
如圖，為要實現的需求，即右鍵table的表頭彈出菜單欄，通過勾選多選框的內容來控制表格列的顯示和隱藏。
1. HTML部分（elemen-ui）：
<el-table :data="list" border fit @header-contextmenu="contextmenu"> <el-table-column v-if="colData[0].istrue" label="放射源ID" align="center" /> <el-table-column v-if="colData[1].istrue" label="源自編號" align="center" /> <el-table-column v-if="colData[2].istrue" label="類型" align="center" /> <el-table-column v-if="colData[3].istrue" label="強度" align="center" /> <el-table-column v-if="colData[4].istrue" label="還源人" align="center" /> </el-table> <!--右鍵彈出的菜單內容--> <!--動態計算菜單出現的位置--> <div v-show="menuVisible" : class="menu1"> <el-checkbox-group v-model="colOptions"> <el-checkbox v-for="item in colSelect" :key="item" :label="item" /> </el-checkbox-group> </div>
(1) 通過v-if="colData[0].istrue"，來判斷表格列的狀態
(2) @header-contextmenu是element-ui的table組件提供的事件，當表格表頭被右鍵點擊時觸發該事件
2. Data部分：
data() {
return{
menuVisible: false, //右鍵菜單的顯示與隱藏
top: 0, //右鍵菜單的位置
left: 0,
colOptions: ['放射源ID', '源自編號', '類型', '強度', '還源人'], //多選框的選擇項
colSelect: ['放射源ID', '源自編號', '類型', '強度', '還源人'], //多選框已選擇的內容，即表格中顯示的列
// istrue屬性存放列的狀態
colData: [
{ title: '放射源ID', istrue: true },
{ title: '源自編號', istrue: true },
{ title: '類型', istrue: true },
{ title: '強度', istrue: true },
{ title: '還源人', istrue: true }
]
}
}3. Js部分：
(1) 在watch部分監聽選中項的變化
<script>
watch: {
colOptions(newVal, oldVal) {
if (newVal) { //如果有值發生變化，即多選框的已選項變化
var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未選中
this.colData.filter(i => {
if (arr.indexOf(i.title) !== -1) {
i.istrue = false
} else {
i.istrue = true
}
})
}
}
},
</script>(2)
methods: {
contextmenu(row, event) {
//先把菜單關閉，目的是第二次或者第n次右鍵鼠標的時候 它默認的是true
this.menuVisible = false
// 顯示菜單
this.menuVisible = true
window.event.returnValue = false //阻止瀏覽器自帶的右鍵菜單彈出
//給整個document綁定click監聽事件， 左鍵單擊任何位置執行foo方法
document.addEventListener('click', this.foo)
//event對應的是鼠標事件，找到鼠標點擊位置的坐標，給菜單定位
this.top = event.clientY
this.left = event.clientX
},
foo() {
this.menuVisible = false //關閉菜單欄
document.removeEventListener('click', this.foo) //解綁click監聽，很重要，具體原因可以看另外一篇博文
}
}其中鼠標事件的返回值具體如下
這里調用的clientX和clientY（鼠標點擊位置相對于瀏覽器的坐標）來給菜單定位
4. CSS部分：
簡單設置了一下菜單的樣式，具體可以看情況修改
.menu1{
position:fixed;
height:auto;
width:231px;
border-radius: 3px;
border: 1px solid #999999;
background-color: #f4f4f4;
padding: 10px;
z-index: 1000
}
.el-checkbox{
display:block;
height:20px;
line-height:20px;
padding:0 5px;
margin-right:0;
font-size:12px;
border: 1px solid transparent;
}
.el-checkbox:hover{
border-radius: 3px;
border: 1px solid #999999;
}2019-9-25更新：
實際開發中一般表格列比較多的時候才會用到動態顯隱。如果還是一條一條寫el-table-column反而太過復雜，因此嘗試了使用v-for來循環，親測可用，具體代碼如下~
<el-table
border
:data="list"
highlight-current-row
@header-contextmenu="contextmenu"
>
<el-table-column
v-for="(item,index) in tableHeader"
v-if="colData[index].istrue"
:key="item.key"
show-overflow-tooltip
:label="item.label"
:prop="item.key"
>
<template slot-scope="scope">
<span v-if="(item.key==='qyrq'||item.key==='ccrq'||item.key==='zcsj')&&scope.row[item.key]">{{ scope.row.qyrq|parseTime() }}</span>
<span v-else>{{ scope.row[item.key] }} </span>
</template>
</el-table-column>
</el-table>dara() {
return{
tableHeader: [
{ label: '放射源ID', key: 'id' },
{ label: '源自編號', key: 'zbh' },
{ label: '類型', key: 'kind' },
{ label: '強度', key: 'qd' },
{ label: '還源人', key: 'user' },
]
}}需要注意的是，這里的tableHeader、colOptions、colSelect、colData中列的順序需要一一對應不可錯亂！
以上就是vue項目中如何使用iview 隱藏Table組件里的列，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
