Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019-08-28 16:07
2775 查看
前言
运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便
效果
实现方式
template部分
<el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-table-column show-overflow-tooltip v-for="(item, index) in col" :key="`col_${index}`" :prop="col[index].prop" :label="item.label" > <template slot-scope="scope"> <p>{{scope.row[item.prop]}}</p> </template> </el-table-column> </el-table>
script部分
import Sortable from 'sortablejs' export default { components: { Sortable }, data() { return { col: [ { label: '位置', prop: 'location' }, { label: '序号', prop: 'sortNum' }, { label: '经办人', prop: 'operator' }, { label: '操作', prop: 'isClick' } ] } }, mounted() { this.rowDrop() }, methods: { rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { const currRow = _this.list.splice(oldIndex, 1)[0] _this.list.splice(newIndex, 0, currRow) _this.list = _this.list.filter(({ adId }) => adId !== 0) _this.list.forEach((item, index) => { _this.sortString += item.adId + ':' + (index + 1) + ',' }) _this.sortString = _this.sortString.substr(0, _this.sortString.length - 1) } }) } } }
完成!你们可以看得懂的!你可以你能行!
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- react.js组件实现拖拽复制和可排序的示例代码
- 基于elementUI实现图片预览组件的示例代码
- JS组件Bootstrap Table表格行拖拽效果实现代码
- Vue.js实现可排序的表格组件功能示例
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- JS组件Bootstrap Table表格行拖拽效果实现代码
- Java实现最简单的拖拽代码示例
- vue.js实现表格合并示例代码
- QT中拖拽的实现(附示例代码)
- 使用Vue父子组件通信实现todolist的功能示例代码
- Angular实现双向折叠列表组件的示例代码
- vue.js实现表格合并示例代码
- React组件内事件传参实现tab切换的示例代码
- JavaScript实现图片轮播组件代码示例
- vue2.0使用swiper组件实现轮播的示例代码
- 使用React实现轮播效果组件示例代码
- vue项目中将element-ui table表格写成组件的实现代码
- vue2.0s中eventBus实现兄弟组件通信的示例代码