关于Element UI table顺序拖动方式，我们需要进行如下步骤：
1. 引入sortablejs和vuedraggable
我们需要先引入sortablejs和vuedraggable这两个库，它们可以帮助我们实现拖拽排序的功能。具体引入方式可以使用CDN或直接下载到本地，这里以使用CDN为例：
<!--引入sortablejs-->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>
<!--引入vuedraggable-->
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@3.1.0/dist/vuedraggable.min.js"></script>
2. 在table中添加vuedraggable组件
接下来，在我们的table中添加<draggable>标签，将v-model绑定到data中的列表，以便在拖拽排序后，数据能够正确反映。
<template>
<div>
<el-table :data="tableData">
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index)">编辑</el-button>
<el-button @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<draggable v-model="tableData">
<el-table :data="tableData">
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index)">编辑</el-button>
<el-button @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</draggable>
</div>
</template>
<script>
import Sortable from 'sortablejs'; // 引入sortablejs库
import draggable from 'vuedraggable'; // 引入vuedraggable库
export default {
data() {
return {
tableData: [
{name: '张三', age: 18, gender: '男'},
{name: '李四', age: 20, gender: '女'},
{name: '王五', age: 22, gender: '男'},
]
};
},
components: {
draggable,
Sortable,
},
// ...
}
</script>
3. 修复拖拽表格中出现的细节问题
在拖拽表格过程中可能会存在一些细节问题，比如拖拽中会出现冒泡事件的问题，需要将其禁止。修复这些问题我们可以在mounted钩子中使用sortablejs，给表格绑定onStart和onEnd方法。
<template>
<div>
<el-table :data="tableData">
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index)">编辑</el-button>
<el-button @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<draggable v-model="tableData" handle=".drag-handle" @start="dragStart" @end="dragEnd">
<el-table :data="tableData">
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button class="drag-handle" icon="el-icon-s-operation"></el-button>
<el-button @click="handleEdit(scope.$index)">编辑</el-button>
<el-button @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</draggable>
</div>
</template>
<script>
import Sortable from 'sortablejs'; // 引入sortablejs库
import draggable from 'vuedraggable'; // 引入vuedraggable库
export default {
data() {
return {
tableData: [
{name: '张三', age: 18, gender: '男'},
{name: '李四', age: 20, gender: '女'},
{name: '王五', age: 22, gender: '男'},
]
};
},
components: {
draggable,
Sortable,
},
methods: {
dragStart(event) {
event.preventDefault();
event.stopPropagation();
},
dragEnd(event) {
event.preventDefault();
event.stopPropagation();
this.$nextTick(() => {
this.$refs.table.updateColumns();
});
},
handleEdit(index) {
console.log('edit', index);
},
handleDelete(index) {
console.log('delete', index);
},
},
mounted() {
this.$nextTick(() => {
const handle = '.drag-handle';
const el = document.querySelector('.el-table__body-wrapper tbody');
const sortable = Sortable.create(el, {
handle,
onStart: evt => {
evt.preventDefault();
evt.stopPropagation();
},
onEnd: evt => {
evt.preventDefault();
evt.stopPropagation();
this.$nextTick(() => {
this.$refs.table.updateColumns();
});
},
});
});
},
}
</script>
示例说明
下面举两个例子说明：
- 拖拽排序后，将结果显示在控制台中，代码如下：
<template>
<div>
<draggable v-model="tableData">
<el-table :data="tableData">
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</draggable>
<el-button @click="printData">打印数据</el-button>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
data() {
return {
tableData: [
{name: '张三', age: 18, gender: '男'},
{name: '李四', age: 20, gender: '女'},
{name: '王五', age: 22, gender: '男'},
]
};
},
components: {
draggable,
},
methods: {
printData() {
console.log(this.tableData);
},
},
}
</script>
- 拖拽排序后，重新渲染表格，代码如下：
<template>
<div>
<draggable v-model="tableData" @change="reRenderTable">
<el-table :data="tableData">
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</draggable>
<el-button @click="printData">打印数据</el-button>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
data() {
return {
tableData: [
{name: '张三', age: 18, gender: '男'},
{name: '李四', age: 20, gender: '女'},
{name: '王五', age: 22, gender: '男'},
]
};
},
components: {
draggable,
},
methods: {
reRenderTable() {
this.$nextTick(() => {
this.$refs.table.$children.forEach(child => {
child.$forceUpdate();
});
});
},
printData() {
console.log(this.tableData);
},
},
}
</script>
以上就是关于Element UI table顺序拖动方式的详细攻略，希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于Element UI table 顺序拖动方式 - Python技术站
微信扫一扫 
支付宝扫一扫 