<template> <div class="app-container calendar-list-container"> <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="序号" width="65"> <template slot-scope="scope"> <span>{{scope.row.id}}</span> </template> </el-table-column> <el-table-column width="180px" align="center" label="时间"> <template slot-scope="scope"> <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> </template> </el-table-column> <el-table-column min-width="300px" label="标题"> <template slot-scope="scope"> <span>{{scope.row.title}}</span> </template> </el-table-column> <el-table-column width="110px" align="center" label="作者"> <template slot-scope="scope"> <span>{{scope.row.author}}</span> </template> </el-table-column> <el-table-column width="80px" label="重要性"> <template slot-scope="scope"> <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon> </template> </el-table-column> <el-table-column align="center" label="阅读数" width="95"> <template slot-scope="scope"> <span>{{scope.row.pageviews}}</span> </template> </el-table-column> <el-table-column class-name="status-col" label="状态" width="110"> <template slot-scope="scope"> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> </template> </el-table-column> <el-table-column align="center" label="拖拽" width="95"> <template slot-scope="scope"> <svg-icon class='drag-handler' icon-class="drag"></svg-icon> </template> </el-table-column> </el-table> <div class='show-d'>默认顺序 {{ olderList}}</div> <div class='show-d'>拖拽后顺序{{newList}}</div> </div> </template> <script> import { fetchList } from '@/api/article' import Sortable from 'sortablejs' export default { name: 'dragTable', data() { return { list: null, total: null, listLoading: true, listQuery: { page: 1, limit: 10 }, sortable: null, olderList: [], newList: [] } }, filters: { statusFilter(status) { const statusMap = { published: 'success', draft: 'info', deleted: 'danger' } return statusMap[status] } }, created() { this.getList() }, methods: { getList() { this.listLoading = true fetchList(this.listQuery).then(response => { this.list = response.data.items this.total = response.data.total this.listLoading = false this.olderList = this.list.map(v => v.id) this.newList = this.olderList.slice() this.$nextTick(() => { this.setSort() }) }) }, setSort() { const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] this.sortable = Sortable.create(el, { onEnd: evt => { const tempIndex = this.newList.splice(evt.oldIndex, 1)[0] this.newList.splice(evt.newIndex, 0, tempIndex) } }) } } } </script> <style scoped> .drag-handler{ width: 30px; height: 30px; cursor: pointer; } .show-d{ margin-top: 15px; } </style>