Posted in Javascript onAugust 28, 2019
前言
运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便
效果
实现方式
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) } }) } } }
完成!你们可以看得懂的!你可以你能行!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
- Author -
吃和远方声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@