element表格行列拖拽

element ui 表格沒有自帶的拖拽排序的功能,只能借助第三方插件Sortablejs來實現,先來看一下動態圖,效果是不是你們想要的。

element表格行列拖拽.gif

首先需要安裝Sortable.js
npm install sortablejs --save
然后引用
import Sortable from 'sortablejs'
需要注意的是element table務必指定row-key,row-key必須是唯一的,如ID,不然會出現排序不對的情況。

示例代碼

<template>
  <div style="width:800px">

    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀區金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀區金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀區金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀區金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //行拖拽
    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)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

預覽

http://jsfiddle.net/xunmeng/2t3zbhkx/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 劉高頻閱讀 309評論 0 0
  • 走過中山橋,蒙蒙細雨中感受這座城市的溫潤如玉,空氣都是清清涼涼的,喜歡這樣的雨天,撐著傘漫步濱河路,逶迤白塔...
    方圓_22cf閱讀 242評論 0 3
  • 上一章,我們講到了內容電商產生的原因,這實際上也是運營這個職業出現所產生的原因:由于用戶對于產品不再但但是注重需求...
    姚叔叔閱讀 2,370評論 0 0
  • 這語文課上戴老師沒有給我們編故事但是我也自己編了一個今天天安門上空沒有白云,感覺故宮里陰森森的。 下學后,...
    朱秉政閱讀 192評論 0 0
  • 你不再好意思到處撒嬌說自己是一個姑娘,不是內心的自卑,而是更能看清自己。 生日的那天,你一個人過。這一次,你沒有像...
    信然閱讀 795評論 12 9