0
点赞
收藏
分享

微信扫一扫

element-ui 的 el-table使用Sortable.js进行数据行与行之间的拖拽功能

青鸾惊鸿 2022-03-24 阅读 111
前端

需求描述:

使用插件:

因为做一个拖拽的功能,所以多番考察后采用了sortable.js。

  • 参考中文网址:sortable.js中文文档 - itxst.com
  • npm安装方式:npm install sortablejs --save
  • 安装后导入:import Sortable from 'sortablejs';

一些拖拽事件和要求网址里都有写到,但像小编这个段位的前端,表示e.........

代码:

首先这是根据项目需求写的,所以数据就直接用后端返回的写到tableData中了。

html中:

<el-table v-loading="loadingFlag" :data="tableData" row-key="id" border>
    <el-table-column type="index" label="序号" align="center" width="60" />
    <el-table-column prop="name" label="字段名称" align="center" />
    <el-table-column prop="type" label="字段类型" align="center" />
    <el-table-column prop="length" label="字段长度" align="center" />
    <el-table-column prop="description" label="描述" align="center" />
    <el-table-column prop="status" label="状态" align="center" />
    <el-table-column :label="操作" align="center">
        <template slot-scope="{row}">
            <el-button type="text" @click="editor(row)">编辑</el-button>
            <el-button type="text" @click="deleteAttribute(row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

mounted中:

mounted() {
    //  拖拽事件
    this.column()
  },

methods中:

// 拖拽排序
    column() {
        const that = this
        // 获取对象
        const el = document.querySelector('.el-table__body-wrapper tbody')
        // 设置配置
        var ops = {
            // 丝滑拖拽
            animation: 1000,
            onEnd({ newIndex, oldIndex }) {
                // 获取拖动后的排序
                const currRow = that.tableData.splice(oldIndex, 1)[0]
                that.tableData.splice(newIndex, 0, currRow)
                // 创建新数组
                const tableArray = []
                that.tableData.forEach((item) => {
                    tableArray.push(item.id)
                })
                // 调用排序接口
                that.getSort(tableArray)
            }
        }
        // 初始化
        Sortable.create(el, ops)
    },

总结:

官网提供的方法样例中都需要设置data-id的值,而小编是后台返回的数据,在每条返回数据中加新的属性怕对后期有所影响,也有些麻烦。所以采用了这种不需要添加任何属性的方法。也很好理解。

 

举报

相关推荐

0 条评论