Element ui表格组件+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')
         Sortable.create(tbody)
    }
  }
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4998