首先第一步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数据变化之后在进行执行

GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:7 小时前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐