vue3使用AntDesign＜a-table＞左右拖拽列及下拉框新增自定义数据

1、左右拖拽列

安装依赖

pnpm install sortablejs

引入

import Sortable from 'sortablejs';

 onMounted(() => {
  const container = document.querySelector('.ant-table-thead > tr');
  new Sortable(container, {
    filter: '.ant-table-selection-column, .ant-table-cell-fix-right-first', // 忽略选择列和操作列
    handle: '.ant-table-cell',
    animation: 150,
    onStart:(evt) => {
      console.log('开始拖拽的时候')
    },
    onEnd: (evt) => {
      const { oldIndex, newIndex } = evt;
      if (oldIndex !== newIndex) {
        const movedItem = columns.value.splice(oldIndex-1, 1)[0]; // 这里减1是列表有选择框
        columns.value.splice(newIndex-1, 0, movedItem);
        localStorage.setItem('computedColumns', JSON.stringify(columns.value));
      }
    }
  });
});

以上基本上就能实现左右拖拽了，但是会有的问题，目前空置的是选择列和操作列是不能拖动的，但是倒数第二列如果要拖到最后一列还是可以拖动的，目前没有找到解决方法，如果有解决的欢迎评论区代码附上一起探讨
2、下拉框新增自定义数据

<a-select
	allowClear
	@dropdownVisibleChange="changeMointor"
	placeholder="请选择入监控节点"
	ref="select"
	style="width: 180px"
	v-model:value="addexcludepool.intranetInControl"
	:options="hostIPData"
	:getPopupContainer="(triggerNode) => triggerNode.parentNode"
>
	<template #dropdownRender="{ menuNode: menu }">
		<v-nodes :vnodes="menu" />
		<a-divider style="margin: 4px 0" />
		<div style="padding: 4px 8px; cursor: pointer;color:#1677FF" @mousedown.prevent="handleAddClick">
			<plus-outlined />
			新增入监控节点
		</div>
	</template>	
</a-select>

const  VNodes = ref((_, {
  attrs,
}) => {
  return attrs.vnodes;
})
const handleAddClick = () => {
	console.log('逻辑内容)
}