当表格列表的数据涉及到排序或者优先级时,这个功能就很关键了,直接拖拽交换顺序比上下点击移动更友好。
效果图关键的是引入npm install --save sortablejs
<template><div class="table"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="sort" label="序号" width="180"> <template slot-scope="scope">{{scope.$index + 1}}</template> </el-table-column> <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></div></template><script>import Sortable from 'sortablejs'export default { name: "TableSort", data() { return { drawer: '', tableData: [] }; }, created() { this.tableData = [ { date: "2016-05-02", name: "王小虎1", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎2", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎3", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎4", address: "上海市普陀区金沙江路 1516 弄" } ] this.$nextTick(()=>{ this.drawer = document.querySelectorAll('.el-table__body-wrapper tbody')[0] this.rowInit() }) }, methods: { rowInit() { const tbody = this.drawer const _this = this this.sortable = Sortable.create(tbody, { onEnd({newIndex, oldIndex}) { const oldData = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, oldData) var newArray = _this.tableData.slice(0) _this.tableData = [] _this.$nextTick(()=>{ _this.tableData = newArray }) } }) } }};</script><style scoped lang="scss">.table { margin: 20px 40px; border: 1px solid #EBEEF5;}</style>