Vue + Element UI el-table + sortablejs 行、列拖拽排序

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量1.7k 收藏 22
点赞数 23
文章标签： vue.js ui javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaaaaa1516682014292/article/details/135703966
版权

实现Element UI中的el-table表格组件的行和列的拖拽排序

使用 Vue3 + Element Plus UI + sortablejs

安装sortablejs

pnpm install sortablejs

行拖拽

基本实现

效果
在这里插入图片描述

<script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

const tableData = ref([
  {
    id: 1,
    date: "2016-05-02",
    name: "王小虎111",
    age: 21,
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "王小虎222",
    age: 22,
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "王小虎333",
    age: 23,
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "王小虎444",
    age: 24,
    address: "上海市普陀区金沙江路 1516 弄",
  },
  {
    id: 5,
    date: "2016-05-08",
    name: "王小虎555",
    age: 25,
    address: "上海市普陀区金沙江路 1518 弄",
  },
]);

onMounted(() => {
  rowDrop();
});

/**
 * 行拖拽排序
 */
function rowDrop() {
  // 要侦听拖拽响应的DOM对象
  const tbody = document.querySelector(".el-table__body-wrapper tbody");
  const data = tableData.value;
  Sortable.create(tbody, {
    // handle: ".el-icon-rank",
    ghostClass: "target-row-class",
    // 结束拖拽后的回调函数
    onEnd({ newIndex, oldIndex }) {
      // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
      const currentRow = data.splice(oldIndex, 1)[0];
      // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
      data.splice(newIndex, 0, currentRow);
    },
  });
}
</script>

<template>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%"
    border
    row-key="id"
  >
    <el-table-column prop="date" label="日期" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="address" label="地址" />
    <!--<el-table-column align="center" width="55">-->
    <!--  <i class="el-icon-rank" />-->
    <!--</el-table-column>-->
  </el-table>
</template>

<style scoped lang="less">
.el-table {
  ::v-deep {
    .target-row-class {
      background: #f0f9eb;
    }
  }
}
</style>

禁止某几行拖拽

效果
在这里插入图片描述

<script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

const tableData = ref([
  {
    id: 1,
    date: "2016-05-02",
    name: "王小虎111",
    age: 21,
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "王小虎222",
    age: 22,
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "王小虎333",
    age: 23,
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "王小虎444",
    age: 24,
    address: "上海市普陀区金沙江路 1516 弄",
  },
  {
    id: 5,
    date: "2016-05-08",
    name: "王小虎555",
    age: 25,
    address: "上海市普陀区金沙江路 1518 弄",
  },
]);

onMounted(() => {
  rowDrop();
});

/**
 * 行拖拽排序
 */
function rowDrop() {
  // 要侦听拖拽响应的DOM对象
  const tbody = document.querySelector(".el-table__body-wrapper tbody");
  const data = tableData.value;
  Sortable.create(tbody, {
    // handle: ".el-icon-rank",
    ghostClass: "target-row-class",
    // 匹配的元素将不会触发拖动
    filter: ".filtered",
    // 拖拽移动事件，返回false取消移动
    onMove: function ({ related }) {
      return related.className.indexOf("filtered") === -1;
    },
    // 结束拖拽后的回调函数
    onEnd({ newIndex, oldIndex }) {
      // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
      const currentRow = data.splice(oldIndex, 1)[0];
      // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
      data.splice(newIndex, 0, currentRow);
    },
  });
}

// 设置ID为1和5的行禁止拖拽
function tableRowClassName({ row, rowIndex }) {
  const freezeList = [1, 5];
  return freezeList.includes(row.id) ? "filtered" : "";
}
</script>

<template>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%"
    border
    row-key="id"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="日期" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="address" label="地址" />
    <!--<el-table-column align="center" width="55">-->
    <!--  <i class="el-icon-rank" />-->
    <!--</el-table-column>-->
  </el-table>
</template>

<style scoped lang="less">
.el-table {
  ::v-deep {
    .target-row-class {
      background: #f0f9eb;
    }
	// 禁止拖拽行背景色
    .filtered {
      background-color: #1db1e7 !important;
    }
  }
}
</style>

列拖拽

基本实现

效果
在这里插入图片描述

<script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

const columns = ref([
  { label: "日期", prop: "date" },
  { label: "姓名", prop: "name" },
  { label: "年龄", prop: "age" },
  { label: "地址", prop: "address" },
]);

const tableData = ref([
  {
    id: 1,
    date: "2016-05-02",
    name: "王小虎111",
    age: 21,
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "王小虎222",
    age: 22,
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "王小虎333",
    age: 23,
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "王小虎444",
    age: 24,
    address: "上海市普陀区金沙江路 1516 弄",
  },
  {
    id: 5,
    date: "2016-05-08",
    name: "王小虎555",
    age: 25,
    address: "上海市普陀区金沙江路 1518 弄",
  },
]);

onMounted(() => {
  columnDrop();
});

/**
 * 列拖拽排序
 */
function columnDrop() {
  // 要侦听拖拽响应的DOM对象
  const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
  Sortable.create(wrapperTr, {
    animation: 180,
    delay: 0,
    onEnd({ newIndex, oldIndex }) {
      const draggedItem = columns.value.splice(oldIndex, 1)[0];
      columns.value.splice(newIndex, 0, draggedItem);
    },
  });
}
</script>

<template>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%"
    border
    row-key="id"
  >
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

禁止某几行拖拽

效果
在这里插入图片描述

<script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

const columns = ref([
  { label: "日期", prop: "date" },
  { label: "姓名", prop: "name", draggable: true },
  { label: "年龄", prop: "age", draggable: true },
  { label: "地址", prop: "address" },
]);

const columnsDrop = ref([
  { label: "日期", prop: "date" },
  { label: "姓名", prop: "name" },
  { label: "年龄", prop: "age" },
  { label: "地址", prop: "address" },
]);

const tableData = ref([
  {
    id: 1,
    date: "2016-05-02",
    name: "王小虎111",
    age: 21,
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "王小虎222",
    age: 22,
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "王小虎333",
    age: 23,
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "王小虎444",
    age: 24,
    address: "上海市普陀区金沙江路 1516 弄",
  },
  {
    id: 5,
    date: "2016-05-08",
    name: "王小虎555",
    age: 25,
    address: "上海市普陀区金沙江路 1518 弄",
  },
]);

// 定义变量来记录固定列的class名
const fixedColumnClass = "filtered";

onMounted(() => {
  columnDrop();
});

function setHeaderCellClass({ column }) {
  const columnLabels = columns.value
    .filter((column) => column.draggable)
    .map((column) => column.label);
  return !columnLabels.includes(column.label) ? fixedColumnClass : "";
}

/**
 * 列拖拽排序
 */
function columnDrop() {
  // 要侦听拖拽响应的DOM对象
  const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
  Sortable.create(wrapperTr, {
    animation: 180,
    delay: 0,
    ghostClass: "target-row-class",
    filter: `.${fixedColumnClass}`,
    // filter: (event, item) => {
    //   // 也可以根据item的类名、id或其他属性来决定是否应该被排除
    //   return !item.classList.contains("draggable");
    // },
    onMove: function ({ related }) {
      return related.className.indexOf(fixedColumnClass) === -1;
    },
    onEnd({ newIndex, oldIndex }) {
      const draggedItem = columnsDrop.value.splice(oldIndex, 1)[0];
      columnsDrop.value.splice(newIndex, 0, draggedItem);
    },
  });
}
</script>

<template>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%"
    border
    row-key="id"
    :header-cell-class-name="setHeaderCellClass"
  >
    <el-table-column
      v-for="(column, index) in columns"
      :key="column.prop"
      :prop="columnsDrop[index].prop"
      :label="column.label"
    />
  </el-table>
</template>

<style scoped lang="less">
.el-table {
  ::v-deep {
    .target-row-class {
      background: #f0f9eb;
    }

    .filtered {
      background-color: #1db1e7 !important;
    }
  }
}
</style>

封装Vue指令

未完待续

也许明天 '
关注
  • 23
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 实现element-ui 表格的行拖拽排序 （Sortable）
PaPablame的博客
12-01 3162
vue 实现element-ui 表格的行拖拽排序 （Sortable）
elementui列表组件（树数据）+sortable.js 实现仅同层级拖拽排序
qingwu1104的博客
06-17 4830
前两天和产品哥哥说好的列表拖拽排序，突然就变成了树列表拖拽排序，还要限制不能跨层跨父级拖拽，没法子，头发抓掉一把之后写出来了，不难，就是我数学不太好，
踩坑日记 - Sortable 拖动树表格排序
张兴华的博客
09-15 2295
以 Element 树表格为例，实现了树表格的同级之间排序（跨级也有代码，但还有问题） 踩坑点： onMove回调中 oldIndex 会随时变化，若想拿到最开始拖动的Row，需要使用onChoose 。 在onChoose需将 oldIndex 或者 oldRow 存储一下，供后续onMove和onEnd使用。 onMove 中可以使用return false 阻止拖动 因为是树形结构，所以回调中返回的 Index 并不准确，所以要预先在onChoose 时将树数据扁平化，才能根据返回的Index获.
关于element-plus的el-tree 组件常用属性及api及控制可拖动层级，el-tree 自定义全选 单选数据 小笔记
努力飞起的菜鸟
03-19 780
1 需要控制最大层级 tree 当前到第几可拖动 :allow-drop="allowDrop"2 @check-change="handleCheckbranch" 方法收集选择标识。拖拽时判定目标节点能否成为拖动目标位置。3 拖动配置激活Ui 样式 自定义。
Vue3+Element-Plus项目 el-table 拖拽排序实现，Vue3项目sortablejs的安装与使用
做笔记/记录遇到的前端bug
10-26 4147
Vue3项目中 el-table 实现拖拽排序，并实现边拖拽边滚动。 图文详解，Vue3项目中如何使用 sortablejs并完成utils封装
Element-ui el-table 使用 SortableJS 实现表格拖拽
qq_52126119的博客
10-10 2999
Element-ui el-table 使用 SortableJS 实现表格拖拽
vue3+element+sortablejs实现table表格 行列动态拖拽
qq_44871531的博客
07-13 1742
vue3+element+sortablejs实现table表格 行列动态拖拽,判断要拖动的行能不能拖动并放置到新位置,拖动时,判断能不能拖动
Vue3+element plus实现table拖拽排序(基于Sortablejs)
weixin_43962877的博客
05-10 1320
【代码】Vue3+element plus实现table拖拽排序(基于Sortable.js)
vue3+elementPlus+sortablejs实现表格行列拖拽
weixin_63203565的博客
04-29 2888
点击拖拽表头就可以改变列的顺序，点击行上下拖拽就可以改变行的顺序。vue3+elementPlus+sortablejs实现表格行列拖拽
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
1.在vue中对数组中的某个对象进行操作时（替换、删除），都需要用到该对象在数组中的下标。 前端代码： scope.$index ：获取当前行的下标 scope.row：获取当前行的对象 效果图： 思路：通过点击事件将该对象在数组...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：...table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2编写主体页面
5年编程经验的老猿。
04-28 446
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 556
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
gaoyu007的博客
04-28 332
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
Vue Canvas图片水印的绘制 图片加水印
生产队的驴
04-28 176
/
Vue.js(过渡)
qq_74472152的博客
04-28 666
过渡其实就是一个淡入淡出的效果。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
el-table el-table-column使用自定义指令
04-18
el-table和el-table-column是Element UI库中的两个组件，用于展示表格数据。自定义指令可以用于对el-table和el-table-column进行扩展和定制。 对于el-table，可以使用自定义指令来实现一些特定的功能，比如自定义排序、拖拽列宽、固定表头等。通过自定义指令，可以在el-table上添加一些额外的行为或样式。 对于el-table-column，可以使用自定义指令来实现一些特定的列样式或行为。比如，可以通过自定义指令来实现某一列的特殊渲染、列宽自适应等功能。 下面是一个示例，展示如何使用自定义指令来扩展el-table和el-table-column： 1. 创建一个自定义指令： ```javascript Vue.directive('my-directive', { bind: function (el, binding, vnode) { // 在绑定时执行的逻辑 // 可以在这里修改el-table或el-table-column的行为或样式 }, inserted: function (el, binding, vnode) { // 在元素插入到DOM时执行的逻辑 }, update: function (el, binding, vnode, oldVnode) { // 在组件更新时执行的逻辑 }, componentUpdated: function (el, binding, vnode, oldVnode) { // 在组件更新完成后执行的逻辑 }, unbind: function (el, binding, vnode) { // 在解绑时执行的逻辑 } }); ``` 2. 在el-table或el-table-column上使用自定义指令： ```html <el-table v-my-directive> <!-- 表格内容 --> </el-table> <el-table-column v-my-directive> <!-- 列内容 --> </el-table-column> ``` 通过上述方式，你可以根据自己的需求来扩展和定制el-table和el-table-column的行为和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值