文章目录
前言
记录 el-table-draggable 插件使用方法。
一、el-table-draggable是什么?
el-table-draggable的存在就是为了让vue-draggable支持element-ui中的el-table组件,让表格可以进行行列拖动等功能。
项目地址:https://gitcode.com/gh_mirrors/el/el-table-draggable
二、使用步骤
1.安装使用
javascript
npm i -S el-table-draggable
(示例):拖动修改数据排序,输入修改逻辑为,【1,2,3,4】,修改2为3,则3-1。
javascript
<template>
<el-table-draggable @input="dragInputHandler">
<el-table :data="tableData" row-key="id" v-loading="loading" size="mini"
max-height="500px">
<el-table-column label="展示排序" width="160" prop="sort" align="center" sortable>
<template slot-scope="{row}">
<el-input-number v-model="row.newSort" controls-position="right" :min="1"
@change="(newSort) => { editSort(row, newSort) }" @blur="() => {
if (!row.newSort) { $message.warning('序号不能为空'); row.newSort = row.sort;};
if (Number(row.newSort) <= 0) { $message.warning('序号不能小于1'); row.newSort= row.sort; };
}"></el-input-number>
</template>
</el-table-column>
</el-table>
</el-table-draggable>
</template>
import ElTableDraggable from "el-table-draggable";
export default {
components: {
ElTableDraggable,
},
methods:{
/** 输入修改排序 */
editSort(row, rowSort) {
if (!rowSort) return;
const oldSort = Number(row.sort);
const newSort = Math.min(Number(rowSort), this.tableData.length);
this.$nextTick(() => {
this.tableData = this.tableData.map((item) => {
const itemData = { ...item };
if (itemData.id === row.id) {
itemData.sort = newSort;
itemData.newSort = newSort;
} else if (oldSort < newSort) {
if (itemData.sort > oldSort && itemData.sort <= newSort) {
itemData.sort -= 1;
itemData.newSort -= 1;
}
} else if (oldSort > newSort) {
if (itemData.sort >= newSort && itemData.sort < oldSort) {
itemData.sort += 1;
itemData.newSort += 1;
}
}
return itemData;
});
})
},
/** 拖拽排序 */
dragInputHandler(data) {
this.$nextTick(() => {
this.tableData = data.map((item, index) => { return { ...item, sort: index + 1,newSort: index + 1 } });
});
},
},
}
2.sortablejs
el-table-draggable插件是基于sortablejs进行封装的,如果已经安装了sortablejs,想实现element的el-table拖拽,则可以进行以下操作。
javascript
<template>
<el-table ref="tableList" :data="tableList" row-key="id" tooltip-effect="dark"
max-height="500" border v-loading="loading" class="draggable">
<el-table-column label="拖拽排序" width="80" align="center">
<template slot-scope="{ row }">
<i class="el-icon-rank allowDrag" style="cursor:pointer"></i>
</template>
</el-table-column>
</el-table>
</template>
import Sortable from "sortablejs";
export default {
mounted() {
this.$nextTick(() => {
this.lineDrop();
});
},
methods:{
/** 拖拽 */
lineDrop() {
const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
const _this = this;
new Sortable(tbody, {
animation: 150,
ghostClass: "ghostClass",
handle: ".allowDrag",//设置操作区域
onEnd(evt) {
const newIndex = evt.newIndex;
const row = _this.tableList[newIndex];
const oneRow = _this.tableList[newIndex - 1];
hotLangSort({
id: oneRow.id,
langId: _this.searchParams.langId,
sort: row.sort,
type: _this.activeTab === 'series' ? 0 : 1
}).then(res => {
_this.$message.success('操作成功')
_this.$parent.getInfo();
_this.getInfo()
}).catch(err => { _this.$message.error('操作失败') }).finally(() => { })
}
})
},
}
}
总结
以上为拖拽插件学习记录。