前言
使用拖拽的方式更改element 表格行和列顺序,并对el-table表格进行封装。
关键插件:sortablejs
一、创建DropTable组件
<template>
<el-table
:data="tableData"
class="elementTable"
border
row-key="id"
align="left"
>
<el-table-column
v-for="(item, index) in col"
:width="item.width"
:key="`col_${index}`"
:label="item.label"
>
<template slot-scope="scope">
<span v-if="!dropCol[index].handle">{{
scope.row[dropCol[index].prop]
}}</span>
<span v-if="dropCol[index].handle">
<span v-for="(handle, index) in dropCol[index].handleList">
<GButton
:label="handle.label"
:key="index"
class="mr5"
type="txt"
@click="handleClick(handle, scope.row)"
></GButton>
</span>
</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
col: [],
dropCol: [],
};
},
props: [
"tableCol", //表头数据
"tableData", //数据源
],
watch: {
tableCol: () => this.colSet(),
},
mounted() {
this.colSet();
// 阻止默认行为
document.body.addEventListener("drop", (event) => {
event.preventDefault();
event.stopPropagation();
});
this.rowDrop();
this.columnDrop();
},
methods: {
//设置表头
colSet() {
this.col = this.tableCol ? cloneDeep(this.tableCol) : [];
this.dropCol = this.tableCol
? cloneDeep(this.tableCol)
: [];
},
//行拖拽
rowDrop() {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
},
});
},
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
const oldItem = this.dropCol[evt.oldIndex];
this.dropCol.splice(evt.oldIndex, 1);
this.dropCol.splice(evt.newIndex, 0, oldItem);
},
});
},
//按钮点击
handleClick(handle, row) {
this.$emit(handle.back, row);
},
},
};
</script>
二、使用
代码如下(示例):
<template>
<div>
<DropTable
@handleEdit="handleEdit"
@handleDel="handleDel"
:tableData="tableData"
:tableCol="tableCol"
></DropTable>
</div>
</template>
<script>
import DropTable from "../commponents/DropTable/DropTable.vue";
export default {
components: {
DropTable,
},
data() {
return {
tableData: [
{
id:1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id:3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id:4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
tableCol: [
{
label: "ID", //显示的标题
prop: "id", //字段名
width:'120px',//宽度
handle: false, //是否是操作栏
handleList: [], //操作按钮
},
{
label: "日期", //显示的标题
prop: "date", //字段名
handle: false, //是否是操作栏
handleList: [], //操作按钮
},
{
label: "名称", //显示的标题
prop: "name", //字段名
handle: false, //是否是操作栏
handleList: [], //操作按钮
},
{
label: "地址", //显示的标题
prop: "address", //字段名
handle: false, //是否是操作栏
handleList: [], //操作按钮
},
{
label: "操作", //显示的标题
prop: "operate", //字段名
handle: true, //是否是操作栏
handleList: [ //操作按钮,结构如下
{
label: "编辑", //操作名称
back:'handleEdit', //该操作的事件
},
{
label: "删除",
back:'handleDel',
},
],
},
],
};
},
methods: {
handleEdit(row){
console.log('编辑',row)
},
handleDel(row){
console.log('删除',row)
},
},
};
</script>
三、最终结果
拖拽前:
拖拽后: