VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序
程序员文章站
2022-07-09 21:19:13
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 官方Demo:http:/ ......
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) } }) },
这样就可以实现基本的行拖拽和列拖拽了