|
@@ -2,6 +2,7 @@
|
|
|
<div class="cus-table">
|
|
|
<div class="cus-table-table">
|
|
|
<el-table
|
|
|
+ v-if="state.dragRefresh"
|
|
|
ref="ref_table"
|
|
|
v-bind="$attrs"
|
|
|
:data="data"
|
|
@@ -11,6 +12,11 @@
|
|
|
@selection-change="v => $emit('update:selected', v)"
|
|
|
max-height="100%"
|
|
|
>
|
|
|
+ <el-table-column v-if="dragable" :width="50" align="center" fixed="left" prop="drag">
|
|
|
+ <template #default="scope">
|
|
|
+ <SvgIcon class="__hover drag-icon" name="move" color="var(--cus-text-color-1)"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column v-if="selected" type="selection" :width="selectWidth" align="center" :selectable="selectable"/>
|
|
|
<el-table-column v-if="singled" :width="singledWidth" align="center" class-name="single-column" fixed="left">
|
|
|
<template #default="scope">
|
|
@@ -144,12 +150,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import Sortable from 'sortablejs'
|
|
|
defineOptions({
|
|
|
name: 'CusTable',
|
|
|
});
|
|
|
-import {computed, getCurrentInstance, reactive, ref, watch} from "vue";
|
|
|
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
|
|
|
|
|
|
-const emit = defineEmits(['handleSort', 'handleFilter', 'handlePage', 'update:selected'])
|
|
|
+const emit = defineEmits(['handleSort', 'handleFilter', 'handlePage', 'update:selected', 'update:data'])
|
|
|
const {proxy} = getCurrentInstance()
|
|
|
const props = defineProps({
|
|
|
pageNum: {},
|
|
@@ -166,9 +173,12 @@ const props = defineProps({
|
|
|
selectable: {},
|
|
|
tableHead: {default: []},
|
|
|
noPage: {default: false},
|
|
|
- pageSizes: {default: () => [10, 20, 30, 40, 50, 100]}
|
|
|
+ pageSizes: {default: () => [10, 20, 30, 40, 50, 100]},
|
|
|
+ dragable: {},
|
|
|
+})
|
|
|
+const state: any = reactive({
|
|
|
+ dragRefresh: true
|
|
|
})
|
|
|
-const state: any = reactive({})
|
|
|
const ref_table = ref()
|
|
|
const handleSort = ({ column, prop, order }: any) => {
|
|
|
emit('handleSort', {
|
|
@@ -203,6 +213,33 @@ watch(() => props.selected, (n: any) => {
|
|
|
}, 100)
|
|
|
}
|
|
|
})
|
|
|
+const initDrag = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ if (props.dragable) {
|
|
|
+ const tbody = ref_table.value.$el.querySelector('.el-table__body-wrapper tbody')
|
|
|
+ new Sortable(tbody, {
|
|
|
+ animation: 150,
|
|
|
+ handle: '.drag-icon', // 设置可拖拽行的类名(el-table自带的类名)
|
|
|
+ onEnd: ({newIndex, oldIndex}: any) => {
|
|
|
+ const d = [...props.data]
|
|
|
+ const targetRow = d[oldIndex]
|
|
|
+ d.splice(oldIndex, 1)
|
|
|
+ d.splice(newIndex, 0, targetRow)
|
|
|
+ console.log(d)
|
|
|
+ emit('update:data', [...d])
|
|
|
+ state.dragRefresh = false
|
|
|
+ setTimeout(() => {
|
|
|
+ state.dragRefresh = true
|
|
|
+ initDrag()
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ initDrag()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -238,6 +275,7 @@ watch(() => props.selected, (n: any) => {
|
|
|
max-height: 100% !important;
|
|
|
.el-table__body {
|
|
|
.el-table__row {
|
|
|
+ -webkit-user-drag: element;
|
|
|
>td {
|
|
|
.cell {
|
|
|
font-size: 14px;
|