一、创建DropTable组件
<template>
<el-table
:data="tableData"
class="elementTable"
border
row-key="id"
align="left"
>
<el-table-column
v-for="(item, index) in col"
:width=""
:key="`col_${index}`"
:label=""
>
<template slot-scope="scope">
<span v-if="!dropCol[index].handle">{{
[dropCol[index].prop]
}}</span>
<span v-if="dropCol[index].handle">
<span v-for="(handle, index) in dropCol[index].handleList">
<GButton
:label=""
:key="index"
class="mr5"
type="txt"
@click="handleClick(handle, )"
></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: () => (),
},
mounted() {
();
// 阻止默认行为
("drop", (event) => {
();
();
});
();
();
},
methods: {
//设置表头
colSet() {
= ? cloneDeep() : [];
=
? cloneDeep()
: [];
},
//行拖拽
rowDrop() {
const tbody = (".el-table__body-wrapper tbody");
const _this = this;
(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.(oldIndex, 1)[0];
_this.(newIndex, 0, currRow);
},
});
},
//列拖拽
columnDrop() {
const wrapperTr = (".el-table__header-wrapper tr");
= (wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
const oldItem = [];
(, 1);
(, 0, oldItem);
},
});
},
//按钮点击
handleClick(handle, row) {
this.$emit(, row);
},
},
};
</script>
二、使用
代码如下（示例）：