Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)
项目需求是要求能对element中 的table进行拖拽行排序
这里用到了sorttable
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)
官方Demo:http://rubaxa.github.io/Sortable/
安装步骤:
npm install sortablejs --save
在.vue中的js部分(需要用到sorttable的vue文件中)引入 也可以 在main.js中引入注册到Vue的根实例中
import Sortable from 'sortablejs'
HTML 部分
<el-table :data="tableData" border width="100%" row-key="id" align="left" v-show="showDictItem"> <el-table-column width="50px"> <template slot-scope="scope"> <el-button type='text' v-show="scope.row.defaultValue === 1">默认</el-button> </template> </el-table-column> <el-table-column width="60px" label="序号" type="index"> </el-table-column> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> <el-table-column label="操作" min-width="100"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button> <el-popover placement="top" v-model="scope.row.visible"> <p>确定要删除当前内容?</p> <div style="text-align: right; margin: 0"> <el-button size="mini" plain @click="scope.row.visible = false">取消</el-button> <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row), scope.row.visible = false">确定</el-button> </div> <el-button size="mini" type="danger" slot="reference">删除</el-button> </el-popover> <el-button size="mini" type="primary" @click="handleDefault(scope.$index, scope.row)" v-show="scope.row.defaultValue === 0">默认</el-button> <el-button size="mini" type="primary" @click="handleDefault(scope.$index, scope.row)" v-show="scope.row.defaultValue === 1">取消</el-button> </template> </el-table-column> </el-table>
data 部分
col: [ { label: '值', prop: 'dataKey' }, { label: '显示名', prop: 'dataValue' } ], dropCol: [ { label: '值', prop: 'dataKey' }, { label: '显示名', prop: 'dataValue' } ], tableData: [],
methos
//行拖拽 rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, currRow) } }) }, //列拖拽 columnDrop() { const wrapperTr = document.querySelector('.el-table__header-wrapper tr') this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex] this.dropCol.splice(evt.oldIndex, 1) this.dropCol.splice(evt.newIndex, 0, oldItem) } }) },
这样就可以实现基本的行拖拽和列拖拽了