其他分享
首页 > 其他分享> > vue2 表格拖拽排序

vue2 表格拖拽排序

作者:互联网

表格的每行都是可以随意拖动,任意排序的。

下载一个拖动的插件:sortable.js

 

下载:  $ npm install sortablejs --save

引用:import Sortable from 'sortablejs';

代码:

 

        <!-- 一定要绑定row-key -->
        <el-table
          :data="tableData"
          class="view-table"
          height="92%"
          stripe
          row-key="uuid"
          default-expand-all
          :header-cell-style="{
            background: '#2B2D60',
            color: '#FFFFFF',
            fontWeight: 500
          }"
        >
          <el-table-column
            v-for="(item, index) in tableBox"
            :key="`tableBox_${index}`"
            :prop="tableBox[index].prop"
            :label="item.label"
            :width="item.label == '工作组名称' ? '150px' : ''"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="查看 "
                placement="top"
              >
                <i
                  class="icon_chakanhuaguo iconfont table-btn"
                  @click="handleCheck(scope.row)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

 

js代码:



      tableData: [],
      tableBox: [
        {
          label: '工作组名称',
          prop: 'planWorkGroupName'
        },
        {
          label: '成员单位',
          prop: 'orgNameStr'
        },
        {
          label: '工作组职责',
          prop: 'jobDescription'
        }
      ],


// 获取用户表 getList() { let obj = { columnTempId: this.kindId, }; listApi(obj).then(res => { if (res.data.code === 200) { this.tableData = res.data.data; //绑定uuid,以防和数据id混乱 this.tableData.map(val => { val.uuid = val.id; }); this.rowDrop();//行拖拽 } }); }, //行拖拽 rowDrop() { //拿到表格元素 const tbody = document.querySelector('.el-table__body-wrapper tbody'); const _this = this; Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { //tableData为表格数据 const currRow = _this.tableData.splice(oldIndex, 1)[0]; _this.tableData.splice(newIndex, 0, currRow); let idList = []; _this.tableData.map(val => { idList.push(val.id); }); let data = { idList: idList }; //只要拖动就调后台接口进行保存,并刷新 updateSortApi(data).then(res => { if (res.data.code === 200) { this.getList(); } }); } }); },

 

标签:val,表格,res,tableData,vue2,data,拖拽,idList
来源: https://www.cnblogs.com/ruyijiang/p/16493550.html