关于Vue3+ element-plus中使用sortablejs做表格拖动遇到的坑,以及表格新增后滚动至底部

两块一毛四

已于 2024-05-14 11:03:22 修改

阅读量390

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-05-13 18:03:26 首次发布

本文链接：https://blog.csdn.net/m244142/article/details/138812920

版权

首先第一步npm install sortablejs --save

第二步引入

import Sortable from "sortablejs";

第三步

首先表单结构

<el-table ref="tableRef" row-key="id" :data="tableData" style="width: 100%"
        height="450px" border>
 </el-table>
// ref="tableRef"防止页面多个表单时候拖动异常

import Sortable from "sortablejs";
import { ref} from 'vue';
const tableRef = ref()
const fun = () => {
//document.querySelector(".el-table__body-wrapper tbody");//如果该页面只有一个表单可以直接获取
//若有多个表单则需要用下面的方法
  const tbody = tableRef.value.$el.querySelector(".el-table__body-wrapper tbody");
  console.log(tbody);
  const data = tableData.value;
  Sortable.create(tbody, {
    ghostClass: "target-row-class",
    onEnd({ newIndex, oldIndex }) {
      console.log(newIndex, oldIndex );
      //内部结合实际业务操作即可
    },
  });

};

对于fun（）的调用时机选择

// table数据 -- 添加
const addTableData = () => {
  let id = idNbmber.value
  let obj: TableTemplateData = {
    idIndex: id,
    indicatorsName: '核心工作',
    indicatorsType: 1,
    score: 0,
    remark: '',
  };
  tableData.value.push(obj);
  scrollToBottom()
};

const scrollToBottom = () => {
  nextTick(() => {
    let table = tableRef.value.layout.table.refs;
    let tableScrollEle = table.bodyWrapper.firstElementChild.firstElementChild;
    tableScrollEle.scrollTop = tableScrollEle.scrollHeight;
  })
}

ableData数据变化之后在进行执行