vue+Element 使用sortable实现表格拖拽

最新推荐文章于 2022-09-29 14:24:59 发布

a@do it

最新推荐文章于 2022-09-29 14:24:59 发布

阅读量958

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/qq_45416916/article/details/122717412

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue+Element 使用sortable实现表格拖拽

1.下载sortable.js

npm install sortablejs --save

2. 当前组件引入sortablejs

import Sortable from 'sortablejs'

3. vue 模板代码

3.1 productListDialog.dataList 数据为父组件传入json数组；
3.2 组件模板

       <el-table :data="productListDialog.dataList" border stripe style="width: 100%" max-height="800" row-key="goods_name">
        <el-table-column label="移动"  width="50">
          <template >
            <span><span class="el-icon-s-promotion handle"></span></span>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px"><img height="70" :src="scope.row.img" alt=""></span>
          </template>
        </el-table-column>
        <el-table-column label="图片链接" width="180">
          <template slot-scope="scope">
               <el-input :autosize="{ minRows: 2, maxRows: 3}" type="textarea"  v-model="scope.row.img"/>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
          <template slot-scope="scope">
               <el-input :autosize="{ minRows: 2, maxRows: 3}" type="textarea"  v-model="scope.row.goods_name"/>
          </template>
        </el-table-column>
        <el-table-column label="地址" min-width="180">
          <template slot-scope="scope">
              <el-input :autosize="{ minRows: 2, maxRows: 3}" type="textarea"  v-model="scope.row.url"/>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="90">
          <template slot-scope="scope">
              <el-input style="width:80px" type="text" size='mini' v-model="scope.row.price"/>
          </template>
        </el-table-column>
        <el-table-column label="市场价" width="90">
          <template slot-scope="scope">
              <el-input type="text" style="width:80px" size='mini' v-model="scope.row.market_price"/>
          </template>
        </el-table-column>
      </el-table>

3.3.模板js

   methods: {
    // 行拖拽
    rowDrop () {
      const tbody = document.querySelector('.el-table__body tbody')
      if(!tbody) return;
      const self = this;
      Sortable.create(tbody, {
        animation: 150,
        handle: '.handle',
        scroll: true,
        onEnd ({ newIndex, oldIndex }) {
          const currRow = self.productListDialog.dataList.splice(oldIndex, 1)[0]
          self.productListDialog.dataList.splice(newIndex, 0, currRow);
        }
      })
    },
  },
  mounted () {
    this.rowDrop()
  },