前言：
此刻看官们对“eltable排序”都比较重视，各位老铁们都需要了解一些“eltable排序”的相关知识。那么小编也在网上汇集了一些有关“eltable排序””的相关资讯，希望咱们能喜欢，小伙伴们快快来了解一下吧！场景
表格数据可以拖拽排序
el-table可拖拽
安装拖拽插件(Sortable)
npm install sortablejs --save --registry=页面引入
import Sortable from "sortablejs";列表配置项
data() { return { col: [ {label: '审批顺序',prop: 'sort'}, {label: '配置明细',prop: 'type'}, {label: '创建人',prop: 'createBy'}, {label: '创建时间', prop: 'createTime'} ], dropCol: [ {label: '审批顺序',prop: 'sort'}, {label: '配置明细',prop: 'type'}, {label: '创建人',prop: 'createBy'}, {label: '创建时间',prop: 'createTime'} ], dataList:[ { "createTime":"2022-02-25 14:47:46", "createBy":"admin", "id":"1497100990839697410", "sort":1, "type":"", "itcode":"hongli.liu" }, { "createTime":"2022-02-25 14:47:46", "createBy":"admin", "id":"1497100990843891713", "sort":2, "type":"", "itcode":"henghu.li" }, { "createTime":"2022-02-25 14:47:46", "createBy":"admin", "id":"1497100990848086017", "sort":3, "type":"", "itcode":"shiliang.zhou" } ] }} 初始化行拖拽// 请保证在页面加载完成后调用rowDrop();如果mounted()中调用无效可以晚一些初始化mounted() { this.rowDrop()},methods: { rowDrop() { const tbody = document.querySelector('.mytable .el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { onEnd({newIndex, oldIndex}) { const currRow = _this.dataList.splice(oldIndex, 1)[0] _this.dataList.splice(newIndex, 0, currRow) _this.dataList.forEach((item, index) => { item.sort = index + 1 }) } }) },}页面写法<div class="mytable"> <el-table ref="dragTable" v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;margin-top: 16px" > <el-table-column label="序号" prop="index" type="index" width="50" align="center" /> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :type="dropCol[index].type" :prop="dropCol[index].prop" align="center" :label="item.label"> <template slot-scope="scope"> <span v-if="dropCol[index].prop==='type'"> <el-tag v-if="scope.row.type === '01'&&!scope.row.itcode" type="success">直接领导</el-tag> <el-tag v-if="scope.row.type === '02'&&!scope.row.itcode" type="success">间接领导</el-tag> <el-tag v-if="scope.row.type === '03'&&!scope.row.itcode" type="success">隔级领导</el-tag> <el-tag v-if="scope.row.itcode" type="success">{{scope.row.itcode}}</el-tag> </span> <span v-else> {{scope.row[item.prop]}} </span> </template> </el-table-column> <el-table-column fixed="right" align="center" width="150" label="操作" > <template slot-scope="scope"> <el-button type="text" @click="updateHandler(scope.$index,'edit')" :disabled="disabled">修改</el-button> <el-button type="text" @click="updateHandler(scope.$index,'show')">查看</el-button> <el-button type="text" @click="delHandler(scope.row.id,scope.$index)" :disabled="disabled">删除</el-button> </template> </el-table-column> </el-table></div> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #eltable排序
