ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue2 表格拖拽排序

2022-07-19 12:05:16  阅读:171  来源: 互联网

标签:val 表格 res tableData vue2 data 拖拽 idList


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

下载一个拖动的插件: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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有