-
下载依赖
npm install sortablejs --save
//or
yarn add -D sortablejs
-
导入
// Default SortableJS
import Sortable from 'sortablejs';
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
-
使用
<div class="app-container">
<el-table
ref="draggableTable"
class="tableDraggable"
v-loading="listLoading"
:data="list"
row-key="id"
>
<el-table-column
label="ID"
prop="id"
/>
<el-table-column
min-width="300"
label="Title"
prop="title"
/>
<el-table-column
label="Author"
prop="author"
/>
</el-table>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
import { ArticleModel } from '@/model/articleModel'
import { getArticles } from '@/apis/articles'
import Sortable from 'sortablejs'
export default defineComponent({
setup() {
let sortable: Sortable | null = null
const dataMap = reactive({
list: Array<ArticleModel>(),
listLoading: true,
total: 0,
listQuery: {
page: 1,
limit: 10
},
async getList() {
dataMap.listLoading = true
const data = await getArticles(this.listQuery)
dataMap.list = data?.data.items ?? []
setTimeout(() => {
dataMap.listLoading = false
}, 0.5 * 1000)
dataMap.total = data?.data.total ?? 0
},
setSort() {
const el = document.querySelectorAll(
'.tableDraggable > .el-table__body-wrapper > table > tbody'
)[0] as HTMLElement
sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost', // Class name for the drop placeholder
onEnd: evt => {
console.log(evt)
}
})
}
})
onMounted(() => {
dataMap.getList()
dataMap.setSort()
})
return { sortable, ...toRefs(dataMap) }
},
methods: {}
})
</script>
<style lang="scss" scoped>
::v-deep .tableDraggable {
.sortable-ghost {
opacity: 0.8;
color: #fff !important;
background: #42b983 !important;
}
}
</style>
-
其他
ghostClass="sortable-ghost" 样式
