<script>
export default {
  name: "ColumnsSelect",
  props:{
    columns:Array
  },
  methods:{
    checkboxChange(event, label) {
      this.columns.filter(item => item.label == label)[0].visible = event;
    }
  }
}
</script>

<template>
  <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px">
    <el-button size="mini" circle icon="el-icon-menu" />
    <el-dropdown-menu slot="dropdown">
      <template v-for="item in columns">
        <el-dropdown-item :key="item.key">
          <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
        </el-dropdown-item>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<style scoped lang="scss">

</style>
