opms_frontend/src/components/table/TableTool.vue

<template>
  <div style="float: right">
    <!--    <div v-show="stripe" class="stripe-panel">-->
    <!--      <el-checkbox v-model="stripe">斑马纹</el-checkbox>-->
    <!--    </div>-->
    <!--    <div class="border-panel">-->
    <!--      <el-checkbox v-model="border">边框（可拉伸列）</el-checkbox>-->
    <!--    </div>-->
    <!--    <el-button-->
    <!--      style="margin: 0 10px 10px 0 !important"-->
    <!--      type="primary"-->
    <!--      @click="clickFullScreen">-->
    <!--      <vab-icon-->
    <!--        :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />-->
    <!--      表格全屏-->
    <!--    </el-button>-->
    <!--    <el-popover-->
    <!--      ref="popover"-->
    <!--      popper-class="custom-table-checkbox"-->
    <!--      trigger="hover">-->
    <!--      <el-radio-group v-model="lineHeight">-->
    <!--        <el-radio label="medium">大</el-radio>-->
    <!--        <el-radio label="small">中</el-radio>-->
    <!--        <el-radio label="mini">小</el-radio>-->
    <!--      </el-radio-group>-->
    <!--      <template #reference>-->
    <!--        <el-button style="margin: 0 10px 10px 0 !important" type="primary">-->
    <!--          <vab-icon icon="line-height" />-->
    <!--          表格尺寸-->
    <!--        </el-button>-->
    <!--      </template>-->
    <!--    </el-popover>-->
    <el-popover popper-class="custom-table-checkbox" trigger="hover">
      <el-checkbox-group v-model="checkColumns">
        <vab-draggable v-bind="dragOptions" :list="columns">
          <div v-for="(item, index) in columns" :key="item + index">
            <vab-icon icon="drag-drop-line" />
            <el-checkbox :disabled="item.disableCheck === true" :label="item.label">
              {{ item.label }}
            </el-checkbox>
          </div>
        </vab-draggable>
      </el-checkbox-group>
      <template #reference>
        <el-button
          icon="el-icon-setting"
          style="margin: 0 10px 10px 0 !important; font-size: 18px; color: black"
          type="text" />
      </template>
    </el-popover>
  </div>
</template>

<script>
  import VabDraggable from 'vuedraggable'

  export default {
    name: 'TableTool',
    components: {
      VabDraggable,
    },
    props: {
      columns: {
        type: Array,
        default() {
          return []
        },
      },
      checkList: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        isFullscreen: false,
        border: true,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'medium',
        // checkList: ['标题', '作者', '评级', '点击量', '时间'],
        // columns: [
        //   {
        //     label: '标题',
        //     width: 'auto',
        //     prop: 'title',
        //     sortable: true,
        //     disableCheck: true,
        //   },
        // ],
        flag: true,
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 600,
          group: 'description',
        }
      },
      checkColumns: {
        get() {
          return this.checkList
        },
        set(val) {
          this.$emit('update:checkList', val)
        },
      },
    },
    created() {
      let list = []
      for (let item of this.columns) {
        list.push(item['label'])
      }
      this.$emit('update:checkList', list)
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .custom-table-container {
    :deep() {
      i {
        cursor: pointer;
      }
    }

    .stripe-panel,
    .border-panel {
      margin: 0 10px #{$base-margin/2} 10px !important;
    }
  }
</style>
<style lang="scss">
  .custom-table-checkbox {
    [class*='ri'] {
      vertical-align: -2.5px;
      cursor: pointer;
    }

    .el-checkbox {
      margin: 5px 0 5px 8px;
    }
  }
</style>