vue——动态控制表格列的显示和隐藏

    <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>

    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 }
      ]
    	}
    }

    <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>

    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监听，很重要，具体原因可以看另外一篇博文
       }
     }

    .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;
    }

    <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' },
    	    ]
    	}}