概要

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.dataif ($table) {$table.refreshColumn()}
}const initColumns = () => {const $table = props.dataspinning.value = truecolumns.value = $table.getColumns()setTimeout(() => {spinning.value = false}, 300)
}const initSortable = () => {setTimeout(() => {const el = listRef.valueif (el) {Sortable.create(listRef.value, {animation: 150,ghostClass: 'ghost',draggable: '.item',onEnd: (evt) => {const $table = props.dataconst { oldIndex, newIndex } = evtconst 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>

效果