想问问大家,在vue3中使用sortablejs进行嵌套表格排序,我使用的是el-table有办法吗
4条回答 默认 最新
- 超级无敌暴龙战士塔塔开 2023-03-28 15:12关注
可以使用nested选项来启用sortablejs在嵌套表格中的排序功能。具体步骤如下:
安装sortablejs和@shopify/draggable依赖包。可以使用npm或yarn命令进行安装:
npm install sortablejs @shopify/draggable --save
在Vue组件中引入sortablejs和@shopify/draggable依赖包,并创建一个ref对象来保存表格的DOM元素。例如:
javascript
import Sortable from 'sortablejs'; import Draggable from '@shopify/draggable'; export default { setup() { const tableRef = Vue.ref(null); Vue.onMounted(() => { const table = tableRef.value; const sortable = new Sortable(table, { draggable: 'tr', handle: '.handle', nested: true }); const draggable = new Draggable.Sortable(table, { draggable: 'td', handle: '.handle', mirror: { constrainDimensions: true } }); }); return { tableRef }; } }
在
标签中添加ref属性,并使用v-for指令循环渲染表格的行和列。例如:html
<template> <table ref="tableRef"> <thead> <tr> <th>编号</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td> <span class="handle">拖动</span> <a href="#" @click.prevent="deleteItem(index)">删除</a> </td> </tr> <tr v-for="(item, index) in list" :key="item.id"> <td></td> <td> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(subItem, subIndex) in item.subList" :key="subItem.id"> <td>{{ subItem.id }}</td> <td>{{ subItem.name }}</td> <td> <span class="handle">拖动</span> <a href="#" @click.prevent="deleteSubItem(index, subIndex)">删除</a> </td> </tr> </tbody> </table> </td> <td></td> </tr> </tbody> </table> </template>
在上面的例子中,使用tableRef对象获取表格的DOM元素,并使用sortablejs和@shopify/draggable创建可拖拽和排序的表格。为了支持嵌套表格排序,需要在sortablejs的配置对象中添加nested: true选项。同时,使用
标签循环渲染表格的行,使用标签循环渲染表格的列,并在标签中添加handle类,以便在列中添加拖拽手柄。
在这个例子中,可以根据需要修改数据结构、表格样式和排序方式,以适应不同的需求。解决 无用评论 打赏 举报
悬赏问题
- ¥20 python忆阻器数字识别
- ¥15 无法输出helloworld
- ¥15 高通uboot 打印ubi init err 22
- ¥20 PDF元数据中的XMP媒体管理属性
- ¥15 R语言中lasso回归报错
- ¥15 网站突然不能访问了,上午还好好的
- ¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
- ¥15 semrush,SEO,内嵌网站,api
- ¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊
- ¥15 振荡电路,ADS仿真