vxe-table表格字段部分显示，使用vxe-toolbar可以勾选字段展示

1.效果展示：

1）页面首次加载展示

 

2).勾选年龄后展示：

2.表格上添加vxe-toolbar，可以选择字段展示插件

 <vxe-toolbar custom ></vxe-toolbar>

3.vxe-table表格列配置：vxe-table-column中添加属性visible，

4.完整代码：

<template>
   <div>
    <el-tabs v-model="activeName" v-if="tabArr.length >1" @tab-click="handleClick">
      <el-tab-pane  v-for="item in tabArr" :key="item.dimCde"   :label="item.dimNme" :name="item.dimCde">
      </el-tab-pane>
   
    </el-tabs>

    <el-form :inline='true'  ref='formInline' :model='formInline' style='margin-bottom: 8px;' class='demo-form-inline form_inline_search' >
    <el-row>
      <el-col :span='16'>
         <div style='width:100%;height:50px;'>
             <el-form-item label='报表名称' prop='reportName'>
                  <el-input type='text' v-model.trim='formInline.reportName' clearable placeholder='请输入名称' size='small'></el-input>
              </el-form-item>
         </div>
      </el-col>
      <el-col :span='8'>
         <el-form-item class='search_button_com'>
            <el-button type='primary' @click='onSubmit(true)' style='margin-bottom: 5px;' size='small'><i class='el-icon-search'></i>查询</el-button>
            <el-button type='primary' plain @click="restForm('formInline')" style='margin-bottom: 5px; ' size='small'><i class='el-icon-delete'></i>重置</el-button>
            <el-button type="primary"  plain  @click="addData()" style="margin-bottom: 5px; " size="small"><i class="el-icon-circle-plus-outline"></i>新增</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
      
       
      <div class='forms_table_title' style="float: left;">
          <i class='el-icon-s-data'></i>列表
      </div>       
      <vxe-toolbar custom style="position: relative; right: 45px;"></vxe-toolbar>
       
        
        <!-- :custom-config="{storage: true, checkMethod: checkColumnMethod}"  -->
        <vxe-table
          border
          resizable
          size="small"
          export-config
          height="300"
          ref="xTable"
          @custom="toolbarCustomEvent"
          :data="tableData1">
         
          <vxe-table-column
          v-for="(group, index) in tableDataDetailArr"
          :key="index" 
          :visible="group.flag" 
           min-width="100"
           header-align="center"
          :field="group.code" 
          :title="group.name">
          </vxe-table-column>

          <vxe-table-column title="操作" width="150" show-overflow align="center">
             <template slot-scope="scope">
                <el-button type="primary" size="small" @click="editData(scope.row)">编辑</el-button>
                <el-button type="danger" plain size="small" @click="delData(scope.row)">删除</el-button>
              </template>
          </vxe-table-column>
        </vxe-table>
       
      
   </div>
</template>

<script>
import $ from 'jquery'
export default {
   name:'currencyReport',
   data () {
      return {
          tableData1: [{id:1,name:'测试一',sex:'男',age:12}],
          activeName: '',
          tabArr:[{dimCde:'1',dimNme:'测试'}],
          showTitle:0,
          flag:false,
          formInline:{
            reportName:''
          },
          tableDataDetailArr:[
            {code:'id',flag:true,name:'主键'},
            {code:'name',flag:true,name:'姓名'},
            {code:'sex',flag:true,name:'性别'},
             {code:'age',flag:false,name:'年龄'}
          ]
         
      };
   },
   mounted() {
     this.activeName = this.tabArr[0].dimCde;
      // debugger;
      // let aa = $('.vxe-toolbar');
      // aa[0].html("<b>Hello world!</b>");
   },
   methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      toolbarCustomEvent (params) {
        let self = this;
       // debugger;
        // const visibleColumn = self.$refs.xTable.getColumns()
        // switch (params.type) {
        //   case 'confirm': {
        //     this.$XModal.message({ message: `点击了确认，显示为 ${visibleColumn.length} 列`, status: 'info' })
        //     break
        //   }
        //   case 'reset': {
        //     this.$XModal.message({ message: `点击了重置，显示为 ${visibleColumn.length} 列`, status: 'info' })
        //     break
        //   }
        //   case 'close': {
        //     this.$XModal.message({ message: `关闭了面板，显示为 ${visibleColumn.length} 列`, status: 'info' })
        //     break
        //   }
        // }
      },
      checkColumnMethod ({ column }) {
       
        if (this.showTitle>0) {
         
          //column.visible = false;
          
        }
        this.showTitle = this.showTitle +1;
        return true;
      },
      onSubmit(flag){

      },
      // table批量选择结果
      restForm(formName) {
        var self = this;
        //self.refs[formName].resetFields();
        this.formInline.reportName = '';
      },
      addData(){

      },
      editData(row){
          console.log(row);
      },
      delData(row){

      }
   }
}
</script>
<style lang='css' scoped>

</style>