Vue.js学习笔记(七)使用sortablejs或el-table-draggable拖拽ElementUI的el-table表格组件

文章目录


前言

记录 el-table-draggable 插件使用方法。


一、el-table-draggable是什么?

el-table-draggable的存在就是为了让vue-draggable支持element-ui中的el-table组件,让表格可以进行行列拖动等功能。

项目地址:https://gitcode.com/gh_mirrors/el/el-table-draggable

二、使用步骤

1.安装使用

javascript 复制代码
npm i -S el-table-draggable

(示例):拖动修改数据排序,输入修改逻辑为,【1,2,3,4】,修改2为3,则3-1。

javascript 复制代码
<template>
	<el-table-draggable @input="dragInputHandler">
		<el-table :data="tableData" row-key="id" v-loading="loading" size="mini" 
		max-height="500px">
			<el-table-column label="展示排序" width="160" prop="sort" align="center" sortable>
              <template slot-scope="{row}">
                <el-input-number v-model="row.newSort" controls-position="right" :min="1"
                  @change="(newSort) => { editSort(row, newSort) }" @blur="() => {
                if (!row.newSort) { $message.warning('序号不能为空'); row.newSort = row.sort;};
                if (Number(row.newSort) <= 0) { $message.warning('序号不能小于1'); row.newSort= row.sort; };
                  }"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </el-table-draggable>
</template>


import ElTableDraggable from "el-table-draggable";
export default {
 components: {
    ElTableDraggable,
  },
 methods:{
    /** 输入修改排序 */
    editSort(row, rowSort) {
      if (!rowSort) return;
      const oldSort = Number(row.sort);
      const newSort = Math.min(Number(rowSort), this.tableData.length);
      this.$nextTick(() => {
        this.tableData = this.tableData.map((item) => {
          const itemData = { ...item };
          if (itemData.id === row.id) {
            itemData.sort = newSort;
            itemData.newSort = newSort;
          } else if (oldSort < newSort) {
            if (itemData.sort > oldSort && itemData.sort <= newSort) {
              itemData.sort -= 1;
              itemData.newSort -= 1;
            }
          } else if (oldSort > newSort) {
            if (itemData.sort >= newSort && itemData.sort < oldSort) {
              itemData.sort += 1;
              itemData.newSort += 1;
            }
          }
          return itemData;
        });
      })
    },
     /** 拖拽排序 */
    dragInputHandler(data) {
      this.$nextTick(() => {
        this.tableData = data.map((item, index) => { return { ...item, sort: index + 1,newSort: index + 1 } });
      });
    },
  },
}

2.sortablejs

el-table-draggable插件是基于sortablejs进行封装的,如果已经安装了sortablejs,想实现element的el-table拖拽,则可以进行以下操作。

javascript 复制代码
<template>
    <el-table ref="tableList" :data="tableList" row-key="id" tooltip-effect="dark" 
    max-height="500"  border v-loading="loading" class="draggable">
      <el-table-column label="拖拽排序" width="80" align="center">
        <template slot-scope="{ row }">
          <i class="el-icon-rank allowDrag" style="cursor:pointer"></i>
        </template>
      </el-table-column>
     </el-table>
</template>


import Sortable from "sortablejs";
export default {
 mounted() {
	this.$nextTick(() => {
        this.lineDrop();
	});
 },
 methods:{
     /** 拖拽 */
    lineDrop() {
      const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
      const _this = this;
      new Sortable(tbody, {
        animation: 150,
        ghostClass: "ghostClass",
        handle: ".allowDrag",//设置操作区域
        onEnd(evt) {
          const newIndex = evt.newIndex;
          const row = _this.tableList[newIndex];
          const oneRow = _this.tableList[newIndex - 1];
          hotLangSort({
            id: oneRow.id,
            langId: _this.searchParams.langId,
            sort: row.sort,
            type: _this.activeTab === 'series' ? 0 : 1
          }).then(res => {
            _this.$message.success('操作成功')
            _this.$parent.getInfo();
            _this.getInfo()
          }).catch(err => { _this.$message.error('操作失败') }).finally(() => { })
        }
      })
    },
 }
}

总结

以上为拖拽插件学习记录。

相关推荐
Nu11PointerException15 分钟前
JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习
笔记·学习
亦枫Leonlew2 小时前
三维测量与建模笔记 - 3.3 张正友标定法
笔记·相机标定·三维重建·张正友标定法
考试宝2 小时前
国家宠物美容师职业技能等级评价(高级)理论考试题
经验分享·笔记·职场和发展·学习方法·业界资讯·宠物
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
黑叶白树4 小时前
简单的签到程序 python笔记
笔记·python
@小博的博客4 小时前
C++初阶学习第十弹——深入讲解vector的迭代器失效
数据结构·c++·学习
幸运超级加倍~4 小时前
软件设计师-上午题-15 计算机网络(5分)
笔记·计算机网络