vue二次封装el-table组件

vue二次封装el-table组件，增加右键菜单选择展示列。

>

使用组件

右键菜单部分代码:

        
        

           
            
                
            
        


 watch: {
      colOptions(newVal, oldVal) {
        if (newVal) {    //如果有值发生变化，即多选框的已选项变化
          var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) 	// 未选中
          this.columns.filter(i => {
            if (arr.indexOf(i.label) !== -1) {
              i.isShow = false;
            } else {
              i.isShow = true;
            }
          })
        }
      }
    },
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;
        
        //colSelect
        if(this.columns){
          this.colSelect=[];
          this.columns.forEach(element => {
            this.colSelect.push(element.label);
          });
          
        }
      },
      foo() {
        this.menuVisible = false; //关闭菜单栏
        //document.removeEventListener('click', this.foo);   //解绑click监听，避免内存泄漏
      }
}