vue3中a-table使用sortablejs设置了列拖动时,固定列处理

在a-table中,如果设置了列可以拖动位置,在有固定列时,固定列应该是不可以拖动的,可以拖动的列也不能拖动到固定列的位置。

其他地方使用sortablejs想要实现:1特定元素不可拖动,2特定区域不可能拖入时,道理相通。

1.固定列不可拖动

在初始化Sortable时,加filter配置项,配置项内容为固定列特有的class

Sortable.create(tHeader as HTMLElement, {
   ...otherOptions,
   filter: `.ant-table-selection-column, .ant-table-cell-fix-left, .ant-table-cell-fix-right`,
})

2.其他列不可拖动到固定列的位置

如果要让拖动不生效,逻辑需要写到 onMove配置项里,不能放到onEnd中

onMove函数文档如下:

// 拖拽移动的时候
 onMove: function (/**Event*/evt, /**Event*/originalEvent) {
   // Example: https://jsbin.com/nawahef/edit?js,output
   evt.dragged; // dragged HTMLElement 
   evt.draggedRect; // DOMRect {left, top, right, bottom}
   evt.related; // HTMLElement on which have guided
   evt.relatedRect; // DOMRect
   evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
   originalEvent.clientY; // mouse position
   // return false; — for cancel
   // return -1; — insert before target
   // return 1; — insert after target
 }

 当返回值为false时,拖动取消,所以在代码中添加下方代码可以实现效果:

onMove: evt => {
  //当释放点的节点class中包含特定class的情况下,返回false,取消拖动
  return evt.related.className.indexOf(`ant-table-cell-fix`) === -1
}

Vue.js 3中,结合Vxe-TableSortableJS以及Vue Sortable Table插件,你可以创建一个支持拖动排序和固定的交互式表格。以下是步骤和思路: 1. 安装依赖: - 首先安装`@vux/easy-table`(Vxe-Table组件库)和`vue-sortable-table`: ``` npm install @vux/easy-table vue-sortable-table sortablejs ``` 2. 引入组件并配置: 在你的组件文件中引入VxeTable和SortableTable,并配置SortableJS用于处理排序: ```html <template> <div> <vxe-table :columns="columns" :data="tableData" ref="vxeTable" :sortable="{ enable: true }"></vxe-table> </div> </template> <script> import { VxeTable } from &#39;@vux/easy-table&#39;; import { VueSortableTable } from &#39;vue-sortable-table&#39;; export default { components: { VxeTable, VueSortableTable, }, data() { return { columns: ..., tableData: ..., // 添加SortableJS实例和配置 sortableOptions: { onEnd: this.handleSortEnd, }, }; }, methods: { handleSortEnd({ oldIndex, newIndex }) { // 根据SortableJS提供的信息更新数据的排顺序 this.tableData = this.tableData.sort((a, b) => a[this.columns[newIndex].field] - b[this.columns[newIndex].field]); } }, }; </script> ``` 3. 设置最后一固定: Vxe-Table本身不直接支持CSS `fixed`属性,但你可以通过添加CSS来实现: ```css .vxe-table__body-wrap { overflow-x: auto; } .vxe-table__body-wrap > tbody tr:last-child td:nth-child(-n+-{{ columns.length - 1 }}):not(:last-child) { position: relative; } .vxe-table__body-wrap > tbody tr:last-child td:last-child { position: absolute; right: 0; width: calc(100% - ({{ columns.length - 1 }} * 100%) - 4px); /* 如果需要滚动条 */ overflow-x: scroll; } ``` 当你尝试拖动,如果发现最后一未随着一起移动,可能是由于CSS覆盖问题或者其他逻辑冲突。检查上述CSS是否完全覆盖了默认样式,并确保在`handleSortEnd`方法中正确地调整了所有的数据顺序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值