html

<qrCode @getlist="gethead" :list="headlist" class="ml16"/>

<el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <div slot="empty">
            <nomore/>
          </div>
          <el-table-column
            label="门店名称"
            prop="name"
            sortable
            v-if="headlist[0].checked"
          />
          <el-table-column
            prop="type"
            label="分类"
            sortable
            v-if="headlist[1].checked"
          />
          <el-table-column
            prop="num"
            sortable
            label="库存数"
            width="280"
            v-if="headlist[2].checked"
          />
          <el-table-column
            prop="amount"
            label="金额"
            sortable
            width="280"
            v-if="headlist[3].checked"
          />
        </el-table>
      </div>

js

 data() {
    return {
      headlist: [
        {
          label: '门店名称',
          checked: true
        }, {
          label: '分类',
          checked: true
        }, {
          label: '库存数',
          checked: true
        }, {
          label: '金额',
          checked: true
        }
      ]
    }
  },
  gethead(e) {
      const data = e
      var data2 = this.headlist
      for (var i = 0; i < data2.length; i++) {
        data2[i].checked = false
      }
      for (var i = 0; i < data.length; i++) {
        for (var s = 0; s < data2.length; s++) {
          if (data2[s].label === data[i]) {
            console.log(data2[s])
            data2[s].checked = true
            console.log(data2[s])
          }
        }
      }
      this.headlist = data2;
      console.log(this.headlist)
      this.$forceUpdate()
    },

组件

<template>
  <div class="qrCode">
    <img @click="show=!show" src="../../icons/icon_qrCode.png" alt="">
    <div class="popsx" v-show="show">
      <el-checkbox-group @change="getlist" v-model="checkList">
        <el-checkbox :checked="item.checked" v-for="(item,index) in list" :key="index"
                     :label="item.label"></el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>

export default {
  name: "qrCode",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      status: '',
      checkList: [],
      show: false
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getlist(e) {
      this.$emit('getlist', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.qrCode {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #E9E9E9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  position: relative;

  img {
    width: 23px;
    height: 24px;
    cursor: pointer;
  }
}

.popsx {
  padding: 10px;
  position: absolute;
  top: 40px;
  background: #fff;
  z-index: 100;
  right: 0;

  ::v-deep {
    .el-checkbox {
      padding-bottom: 5px;
      padding-top: 5px;
    }
  }
}
</style>