such as headings,
I want to sort the form by dragging within el-dialog.
can be dragged if it is placed on the general surface.
indicates that I have correctly introduced sortablejs into
, but if I put the form on el-dialog,
drag sorting will become invalid.
from the console point of view,
I am sure to select the correct form,
but still can not solve the problem,
ask for a high point of reference.
<template>
<div>
<el-button @click="dialogFormVisible = true"></el-button>
<el-dialog :visible.sync="dialogFormVisible">
<el-table row-key="date" ref="table" border :data="tableData" style="width: 100%" id="AA">
<el-table-column prop="date" label="" width="180">
</el-table-column>
<el-table-column prop="name" label="" width="180">
</el-table-column>
<el-table-column prop="address" label="">
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
import Sortable from "sortablejs"
export default {
name: "inspection",//
data(){
return{
dialogFormVisible: false,
tableData: [{
date: "2016-05-02",
name: "",
address: " 1518 "
}, {
date: "2016-05-04",
name: "",
address: " 1517 "
}, {
date: "2016-05-01",
name: "",
address: " 1519 "
}, {
date: "2016-05-03",
name: "",
address: " 1516 "
}]
}
},
mounted() {
const el = document.querySelectorAll(".el-dialog .el-table__body-wrapper > table > tbody")[0]
const self = this
Sortable.create(el, {
onEnd({ newIndex, oldIndex }) {
const targetRow = self.tableData.splice(oldIndex, 1)[0]
self.tableData.splice(newIndex, 0, targetRow)
}
})
}
}
</script>
<style scoped>
</style>