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" :style="{top:top+ &quot;px&quot;,left:left+ &quot;px&quot;}" class="menu1">
     <el-checkbox-group v-model="colOptions">
           <el-checkbox v-for="item in colSelect" :key="item" :label="item" />
     </el-checkbox-group>
</div>
————————————————
原文鏈接：https://blog.csdn.net/qq_44450612/article/details/99715181/

(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中列的順序需要一一對應不可錯亂！

參考博文如下： (1)vue：遇到的坑之-----動態控制表格列的顯隱（element-ui）：https://blog.csdn.net/weixin_43551840/article/details/92804040 (2)element+vue鼠標右鍵顯示菜單：https://blog.csdn.net/z2014ypd/article/details/90510377