element table表格拖拽排序特效代码下载


element table表格拖拽排序特效代码下载
element table表格拖拽排序特效代码下载以及table表格、拖拽排序等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

2. 引入JS

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/Sortable.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3. HTML代码

  <div id="app">
    <!-- vue基于element table表格拖拽 start -->
    <div class="table-wrap">
      <div class="table-box">
        <h4>vue基于element table表格拖拽:</h4>
        <el-table :data="tableData" border stripe 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>
      <hr>
      <div class="datashow-box">
        <div class="columndata">
          <h4>列拖拽时的数据变化:</h4>
          <pre style="text-align: left">{{dropCol}}</pre>
        </div>
        <div class="rowdata">
          <h4>行拖拽时的数据变化:</h4>
          <pre style="text-align: left">{{tableData}}</pre>
        </div>
      </div>
    </div>
    <!-- vue基于element table表格拖拽 end -->
  </div>
  <!-- 引入element组件库 -->
  <script>
    new Vue({
      el: '#app',
      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-01',
              name: '王小虎1',
              address: '上海市普陀区金沙江路 101 弄'
            },
            {
              id: '2',
              date: '2016-05-02',
              name: '王小虎2',
              address: '上海市普陀区金沙江路 102 弄'
            },
            {
              id: '3',
              date: '2016-05-03',
              name: '王小虎3',
              address: '上海市普陀区金沙江路 103 弄'
            },
            {
              id: '4',
              date: '2016-05-04',
              name: '王小虎4',
              address: '上海市普陀区金沙江路 104 弄'
            }
          ]
        }
      },
      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>

相关推荐

发表评论

相关文章