前言
運營小姐姐說想要可以直接拖拽排序的功能,原來在序號六的廣告可能會因為金主爸爸加錢換到序號一的位置,拖拽操作就很方便
效果

實現方式
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)   }  }) } }}完成!你們可以看得懂的!你可以你能行!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答