elementUI中table表格列实现拖拽

末蓝、 2022-12-16 09:03 378阅读 0赞

1、首先，需要执行`npm install sortablejs --save-dev` 安装sortable.js  
2、在页面内引入

<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: '刘琦',  
          address: '某某地金沙江路 100 弄'  
        \},  
        \{  
          id: '2',  
          date: '2016-05-04',  
          name: '王舞2',  
          address: '某偶滴金沙江路 200 弄'  
        \},  
        \{  
          id: '3',  
          date: '2016-05-01',  
          name: '李四3',  
          address: ' 莫某地金沙江路 300 弄'  
        \}  
      \]  
    \}  
  \},  
  mounted() \{  
  // 阻止默认行为  
    document.body.ondrop = function (event) \{  
             event.preventDefault();  
             event.stopPropagation();  
     \};  
    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>