相思资源网 Design By www.200059.com

前言

运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便

效果

Elementui表格组件+sortablejs实现行拖拽排序的示例代码

实现方式

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,表格行拖拽排序,Elementui,表格行拖拽排序

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“Elementui表格组件+sortablejs实现行拖拽排序的示例代码”

暂无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%。