关于Vue3+ element-plus中使用sortablejs做表格拖动遇到的坑,以及表格新增后滚动至底部
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

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




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 年前
更多推荐
所有评论(0)