import Sortable from "sortablejs";
created() {
//禁止火狐拖拽进行搜索
document.body.ondrop = function(event){
event.preventDefault();
event.stopPropagation();
}
}
// 打开对话框的时候调用下
openCustomDialog(){
this.rowDrop()
}
// 行拖拽
rowDrop() {
this.$nextTick(() => {
this.sortable1 = Sortable.create(
document.querySelector(".form_table .el-table__body-wrapper tbody"),
{
handle: ".drag-btn",
onEnd: ({ newIndex, oldIndex }) => {
this.tableData.splice(
newIndex,
0,
this.tableData.splice(oldIndex, 1)[0]
);
var newArray = this.tableData.slice(0);
this.tableData = [];
this.$nextTick(function () {
this.tableData = newArray;
});
},
}
);
});
},
<el-dialog
title="自定义"
:visible.sync="customDialogVisible"
v-if="customDialogVisible"
:append-to-body="true"
width="20%"
>
<el-table
:data="tableData"
class="form_table"
border
fit
highlight-current-row>
<el-table-column
prop="sort"
label="拖拽更换顺序"
align="center">
<i class=" el-icon-sort drag-btn"></i>
</el-table-column>
<el-table-column
prop="desc"
label="图片类型"
align="center">
</el-table-column>
</el-table>
<div class="btns">
<el-button @click="cancelCustomDialog">取消</el-button>
<el-button type="primary" @click="confirmCustomDialog" :loading="loading">确定</el-button>
</div>
</el-dialog>
<style scoped>
//悬停出现鼠标
.drag-btn{
cursor: pointer;
}
</style>
注意:drag-btn 这个可以修改,但是上下要对应上