铁雪资源网 Design By www.gsvan.com
前言
运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便
效果
实现方式
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) } }) } } }
完成!你们可以看得懂的!你可以你能行!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无Elementui表格组件+sortablejs实现行拖拽排序的示例代码的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。