element-ui table表格行拖拽
简单案例
此功能借助Sortable.js来实现 中文网址: sortable.js
1.安装插件
npm install sortablejs --save
2.vue页面中引入并注册
import Sortable from 'sortablejs'
export default {
components: {
Sortable
},
}
3.使用方法
el-table要指定row-key属性,值必须是唯一值,可以取每一行的id
<el-table class="drag" highlight-current-row row-key="dataId" :data="tableData" :stripe="true" :border="true" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column align="center" type="selection" width="55">
</el-table-column>
<el-table-column align="center" prop="roleName" label="项目名称" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column align="center" prop="roleDesc" label="排序号" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column align="center" prop="createTime" label="创建时间" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column align="center" prop="desc" label="项目描述" :show-overflow-tooltip="true">
</el-table-column>
// 可拖拽的区域
<el-table-column align="center" label="拖拽排序"><i class="el-icon-rank handleDrag"></i></el-table-column>
</el-table>
mounted() {
this.rowDrop()
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
// Sortable的其他属性或方法使用可参考官方文档
Sortable.create(tbody, {
animation: 300,
easing: "cubic-bezier(1, 0, 0, 1)",
handle: ".drag /deep/.handleDrag", // handle控制拖拽的区域,CSS样式控制
onEnd({
newIndex,
oldIndex
}) {
const currRow = _this.tableData.splice(oldIndex, 1)[0]
console.log(currRow)
_this.tableData.splice(newIndex, 0, currRow)
}
})
},
},
<style>
.drag /deep/.handleDrag {
cursor: move;
width: 100%;
font-weight: 700;
font-size: large;
color: #3c3e45;
}
</style>