前端模拟面试练习提升题

在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法

//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order

    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">

      //设置sortable属性时出现排序按钮

      <el-table-column prop="ID" label="座号" sortable>

    </el-table>

但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能

  • sortablejs GitHub地址
//安装sortable.js

Install with NPM:


$ npm install sortablejs --save


//在组件内引入

import Sortable from 'sortablejs'


//为需要拖拽排序的表格添加ref属性

<el-table  ref="dragTable">


//在数据渲染完毕添加拖拽事件

created(){

   this.getBanner()

},

methods:{

async getBanner(val){

          await apiGetBanner().then((res)=>{

               this.bannerTable = res.data.data;

          })

         this.oldList = this.bannerTable.map(v => v.id);

         this.newList = this.oldList.slice();

         this.$nextTick(() => {

             this.setSort()  //数据渲染完毕执行方法

         })

    }

    setSort() {

        const el = this.$refs.dragTable.$el.querySelectorAll(

         '.el-table__body-wrapper > table > tbody'

        )[0];

        this.sortable = Sortable.create(el, {

         // Class name for the drop placeholder,

         ghostClass: 'sortable-ghost', 

                setData: function(dataTransfer) {

                dataTransfer.setData('Text', '')

            },

           //拖拽结束执行,evt执向拖拽的参数

           onEnd: evt => {

              //判断是否重新排序

              if(evt.oldIndex !== evt.newIndex){

                  let data = {

                     id:this.bannerTable[evt.oldIndex].id,

                     banner_order:evt.newIndex

                  }

                  //数据提交失败则恢复旧的排序

                  apiPutBanner(data).catch(()=>{

                     const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];

                     this.bannerTable.splice(evt.newIndex, 0, targetRow);

                  })

              }

            }

        })

    }

}
如果需要列拖拽的话，可以参考下面的代码
//行拖拽

    rowDrop() {

      const tbody = document.querySelector('.el-table__body-wrapper tbody')

      const _this = this

      Sortable.create(tbody, {

        onEnd({ newIndex, oldIndex }) {

          const currRow = _this.tableData.splice(oldIndex, 1)[0]

          _this.tableData.splice(newIndex, 0, currRow)

        }

      })

    },

    //列拖拽

    columnDrop() {

      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')

      this.sortable = Sortable.create(wrapperTr, {

        animation: 180,

        delay: 0,

        onEnd: evt => {

          const oldItem = this.dropCol[evt.oldIndex]

          this.dropCol.splice(evt.oldIndex, 1)

          this.dropCol.splice(evt.newIndex, 0, oldItem)

        }

      })

    }
 
-------------------------------------------------------------
智一面|前端模拟面试练习提升题