vxe-table4.6 + vue3.2 + ant-design-vue 3.x 实现对列的显示、隐藏、排序

概要

vxe-table中的vxe-toolbar没有拖拽功能，故自己实现

源码

<template>
  <a-popover v-model:visible="open" placement="bottomRight" trigger="click">
    <template #content>
      <div class="content">
        <div class="list" ref="listRef">
          <div v-for="item in columns" :key="item.key" class="item">
            <a-checkbox v-model:checked="item.visible" @change="onCheckChange">
              {{ item.title }}
            </a-checkbox>
          </div>
        </div>
      </div>
    </template>
    <a-button shape="circle"> <MenuFoldOutlined /> </a-button>
  </a-popover>
</template>
<script setup>
import { ref, watch, nextTick, defineProps } from 'vue'
import { MenuFoldOutlined } from '@ant-design/icons-vue'
import Sortable from 'sortablejs'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const open = ref(false)
const spinning = ref(false)
const columns = ref([])
const listRef = ref(null)

const onCheckChange = () => {
  const $table = props.data
  if ($table) {
    $table.refreshColumn()
  }
}

const initColumns = () => {
  const $table = props.data
  spinning.value = true
  columns.value = $table.getColumns()
  setTimeout(() => {
    spinning.value = false
  }, 300)
}

const initSortable = () => {
  setTimeout(() => {
    const el = listRef.value
    if (el) {
      Sortable.create(listRef.value, {
        animation: 150,
        ghostClass: 'ghost',
        draggable: '.item',
        onEnd: (evt) => {
          const $table = props.data
          const { oldIndex, newIndex } = evt
          const column = columns.value[oldIndex]
          columns.value.splice(oldIndex, 1)
          columns.value.splice(newIndex, 0, column)
          $table.loadColumn(columns.value)
        }
      })
    }
  }, 500)
}

watch(
  () => open.value,
  async (val) => {
    if (val && props.data) {
      initColumns()
      initSortable()
    }
  }
)
</script>

<style scoped lang="scss">
.content {
  height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
  }
}
</style>

效果