zoukankan      html  css  js  c++  java
  • vue插件实现表格拖拽 sortable 遇见的坑

    下载插件  npm install sortable.js --save (下载的时候一定要这样去下载,不要去下载    npm install sortable--save )
    因为sortable.js和sortable是不一样的哈
    
    引入      import Sortable from 'sortablejs'; 
    
    //   千万不要加点.js  否者就会报错create不是一个方法
    
    
    
    注意  这个插件是不要注册的哈。
    需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况。
    参考的地址  https://blog.csdn.net/qq_26440803/article/details/83663511
    
    为啥一开始就在mounted中调用了两个函数,不太懂?????
    
    
    <template>
      <div style="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>
    
      </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>
    

    https://www.cnblogs.com/xiangcheng618/p/10241090.html 这个地址也可以进行拖拽,明天去研究一下

    在后来和产品的沟通中发现,并不是这样的效果。
    他希望排序后,做左边的日期也能够排序。
    所以其他的都不改变,是改变这个rowDrop方法。

    
    //行拖拽
          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)
               
              //对日期进行重新排序
              for(let i=0;i<_this.tableData.length;i++){
                _this.tableData[i].date=i+1;
              }
    
            }
          })
        },
    

    如何达到产品说的那一种效果。我之前回来想了很久。都没有做好.
    今天忽然脑壳开窍了,就想明白了。
    我觉得 思维灵活比是编成中最重要的,没有之一哈。

    
    

  • 相关阅读:
    Java Output流写入包装问题
    SpringBoot项目单元测试不经过过滤器问题
    SpringSecurity集成启动报 In the composition of all global method configuration, no annotation support was actually activated 异常
    JWT jti和kid属性的说明
    Maven 排除依赖
    第五章 基因概念的发现
    第三章 孟德尔遗传的拓展
    第二章 孟德尔遗传
    第一章 引言
    GWAS全基因组关联分析
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12520984.html
Copyright © 2011-2022 走看看