vue项目默认隐藏部分列数据，动态显示需要显示的列数据

1.由于项目需要做一个表格填写数据，数据项太多了，导致用户进来看到的数据太多，看不到重点，产品提出默认把一些不是太过重要的项隐藏起来不显示，通过上方的下拉框来控制勾选需要查看的数据,支持全选

2.项目效果图

3.demo用到的组件el-table，el-select

4.项目代码

<template>
  <div>
    <div class="contain">
      <div class="contain-title">显示列</div>
      <div class="contain-content">
        <el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" @change="handdleChange" @remove-tag="removeTag"
          placeholder="请选择">
          <el-option :key="99999999999" label="全选" value="全选" @click.native="selectAll">
          </el-option>
          <el-option v-for="item in options" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="index" prop="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="class" label="班级" min-width="150" align="center" v-if="value2.includes('班级')">
        </el-table-column>
        <el-table-column prop="class" label="年龄" min-width="180" align="center" v-if="value2.includes('年龄')">
        </el-table-column>
        <el-table-column prop="class" label="身高" min-width="180" align="center" v-if="value2.includes('身高')">
        </el-table-column>
        <el-table-column prop="class" label="体重" min-width="180" align="center" v-if="value2.includes('体重')">
        </el-table-column>
        <el-table-column prop="class" label="理科成绩" min-width="180" align="center" v-if="value2.includes('理科成绩')">
        </el-table-column>
        <el-table-column prop="class" label="文科成绩" min-width="180" align="center" v-if="value2.includes('文科成绩')">
        </el-table-column>
        <el-table-column prop="class" label="排名" min-width="180" align="center" v-if="value2.includes('排名')">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <span class="delete" @click="view(scope.row)">查看</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 需要显示的列集合
      options: [
        '班级',
        '年龄',
        '身高',
        '体重',
        '理科成绩',
        '文科成绩',
        '排名'
      ],
      // 显示列的集合
      value2: [],
      // 表格数据
      tableData: [{
        name: '王小虎',
        class: '一年级一班',
        age: '18',
        heigh: '180',
        weight: '150',
        score1: '550',
        score2: '300',
        rank: '10'
      }, {
        name: '赵四',
        class: '一年级一班',
        age: '19',
        heigh: '170',
        weight: '140',
        score1: '550',
        score2: '300',
        rank: '11'
      }, {
        name: '王小虎',
        class: '一年级一班',
        age: '18',
        heigh: '180',
        weight: '150',
        score1: '550',
        score2: '300',
        rank: '10'
      }, {
        name: '钱多多',
        class: '一年级一班',
        age: '18',
        heigh: '180',
        weight: '150',
        score1: '550',
        score2: '300',
        rank: '1'
      }, {
        name: '孙福星',
        class: '一年级一班',
        age: '18',
        heigh: '180',
        weight: '150',
        score1: '550',
        score2: '300',
        rank: '9'
      }, {
        name: '李子',
        class: '一年级一班',
        age: '18',
        heigh: '180',
        weight: '150',
        score1: '550',
        score2: '300',
        rank: '3'
      }]
    }
  },
  methods: {
    // 选中触发
    handdleChange (val) {
      // 反选全选
      if (val.length === this.options.length && !val.includes('全选')) {
        this.value2.unshift('全选')
      }
      if (val.length === this.options.length && val.includes('全选')) {
        this.value2 = val.filter(item => item !== '全选')
      }
    },
    // 全选
    selectAll () {
      if (this.value2.length < this.options.length) {
        const option = JSON.parse(JSON.stringify(this.options))
        option.unshift('全选')
        this.value2 = option
      } else {
        this.value2 = []
      }
    },
    // 多选模式移除
    removeTag (val) {
      if (val === '全选') {
        this.value2 = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contain{
  display: flex;
  align-items: center;
  padding: 10px;
}

</style>

5.代码中主要的一点要注意的是全选是固定写死的，并为其添加一个点击事件来处理选中与取消全部数据，上面的显示列如果有很多地方使用可以封装成组件，不封装的话上面代码可以直接复制粘贴把数据换为自己的所需要的就可以了，如有不足还望多多指教