欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element表格行列拖拽的實現(xiàn)示例

 更新時間:2021年10月01日 09:20:37   作者:尋夢無痕  
本文主要介紹了element表格行列拖拽的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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


首先需要安裝Sortable.js

npm install sortablejs --save

然后引用

import Sortable from ‘sortablejs'

需要注意的是element table務必指定row-key,row-key必須是唯一的,如ID,不然會出現(xiàn)排序不對的情況。

###示例代碼

<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: '上海市普陀區(qū)金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀區(qū)金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀區(qū)金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀區(qū)金沙江路 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>

到此這篇關于element表格行列拖拽的實現(xiàn)示例的文章就介紹到這了,更多相關element表格行列拖拽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue項目如何去掉URL中#符號的方法

    vue項目如何去掉URL中#符號的方法

    在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項目如何去掉URL中#符號的相關資料,文中通過實例代碼的非常詳細,需要的朋友可以參考下
    2022-07-07
  • vue項目報錯Uncaught runtime errors的解決方案

    vue項目報錯Uncaught runtime errors的解決方案

    使用vue-cli的vue項目,出現(xiàn)編譯錯誤或警告時,在瀏覽器中顯示全屏覆蓋,提示報錯Uncaught runtime errors,本文給大家介紹了vue項目報錯Uncaught runtime errors的解決方案,需要的朋友可以參考下
    2024-01-01
  • Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能

    Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能

    這篇文章主要介紹了Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • VUE實現(xiàn)強制渲染,強制更新

    VUE實現(xiàn)強制渲染,強制更新

    今天小編就為大家分享一篇VUE實現(xiàn)強制渲染,強制更新,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue el-select與el-tree實現(xiàn)支持可搜索樹型

    vue el-select與el-tree實現(xiàn)支持可搜索樹型

    本文主要介紹了vue el-select與el-tree實現(xiàn)支持可搜索樹型,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • 在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法

    在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法

    由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾,但是報錯,百度說vue不能同時使用v-if和v-for,今天小編給大家分享解決方式,感興趣的朋友跟隨小編一起看看吧
    2023-07-07
  • vue?Echarts實現(xiàn)儀表盤案例

    vue?Echarts實現(xiàn)儀表盤案例

    這篇文章主要為大家詳細介紹了vue?Echarts實現(xiàn)儀表盤案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue項目部署后首頁白屏問題排查與解決方法

    Vue項目部署后首頁白屏問題排查與解決方法

    在部署 Vue.js 項目時,有時會遇到首頁加載后出現(xiàn)白屏的情況,這可能是由于多種原因造成的,本文將介紹一些常見的排查方法和解決方案,幫助開發(fā)者快速定位問題并解決,感興趣的小伙伴跟著小編一起來看看吧
    2024-08-08
  • vue實現(xiàn)圖片拖拽功能

    vue實現(xiàn)圖片拖拽功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片拖拽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • vue3 vite如何讀取文件內容

    vue3 vite如何讀取文件內容

    這篇文章主要介紹了vue3 vite如何讀取文件內容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05

最新評論