arms-app 1.0.70 → 1.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/view/3 +199 -0
package/package.json
CHANGED
package/view/3
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- 列拖拽示例页面：支持通过拖拽表头调整列顺序 -->
|
|
3
|
+
<section class="draggable-columns-table-page">
|
|
4
|
+
<!-- 标题与说明文案 -->
|
|
5
|
+
<h1>列拖拽表格</h1>
|
|
6
|
+
<p class="desc">通过拖拽表头，使用 sortablejs 实现列换位。</p>
|
|
7
|
+
|
|
8
|
+
<!-- 表格：通过 columns 数组驱动所有可拖拽列（含序号/操作列），rows 负责行数据 -->
|
|
9
|
+
<el-table
|
|
10
|
+
ref="draggableTable"
|
|
11
|
+
:key="tableKey"
|
|
12
|
+
:data="rows"
|
|
13
|
+
@sort-change="handleSortChange"
|
|
14
|
+
border
|
|
15
|
+
stripe
|
|
16
|
+
style="width: 100%"
|
|
17
|
+
height="420"
|
|
18
|
+
>
|
|
19
|
+
<!-- 所有列（包含序号列/业务列/操作列）均由 columns 数组统一驱动，可参与拖拽 -->
|
|
20
|
+
<el-table-column
|
|
21
|
+
v-for="col in columns"
|
|
22
|
+
:key="col.key || col.prop"
|
|
23
|
+
:prop="col.prop"
|
|
24
|
+
:label="col.label"
|
|
25
|
+
:width="col.width"
|
|
26
|
+
:min-width="col.minWidth"
|
|
27
|
+
:align="col.align || 'left'"
|
|
28
|
+
:header-align="col.headerAlign || col.align || 'left'"
|
|
29
|
+
:sortable="col.sortable"
|
|
30
|
+
>
|
|
31
|
+
<!-- 表头插槽：渲染拖拽手柄（handle），供 sortablejs 使用 -->
|
|
32
|
+
<template slot="header">
|
|
33
|
+
<div class="header-draggable">
|
|
34
|
+
<span class="header-label">{{ col.label }}</span>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
<!-- 单元格插槽：根据是否为操作列渲染不同内容 -->
|
|
38
|
+
<template slot-scope="scope">
|
|
39
|
+
<template v-if="col.isOperation">
|
|
40
|
+
<el-button type="text" size="mini" @click="onView(scope.row)">查看</el-button>
|
|
41
|
+
<el-button type="text" size="mini" @click="onEdit(scope.row)">编辑</el-button>
|
|
42
|
+
<el-button type="text" size="mini" @click="onDelete(scope.row)">删除</el-button>
|
|
43
|
+
</template>
|
|
44
|
+
<template v-else-if="col.isIndex">
|
|
45
|
+
<span>{{ scope.$index + 1 }}</span>
|
|
46
|
+
</template>
|
|
47
|
+
<template v-else>
|
|
48
|
+
<span>{{ scope.row[col.prop] }}</span>
|
|
49
|
+
</template>
|
|
50
|
+
</template>
|
|
51
|
+
</el-table-column>
|
|
52
|
+
</el-table>
|
|
53
|
+
</section>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<script>
|
|
57
|
+
import Sortable from "sortablejs";
|
|
58
|
+
|
|
59
|
+
export default {
|
|
60
|
+
name: "DraggableColumnsTableView",
|
|
61
|
+
data() {
|
|
62
|
+
return {
|
|
63
|
+
// 表格行数据：示例客户信息（实际项目中可从接口或 Vuex 获取）
|
|
64
|
+
rows: [
|
|
65
|
+
{
|
|
66
|
+
id: 1,
|
|
67
|
+
name: "王小虎",
|
|
68
|
+
birthDate: "1990-03-15",
|
|
69
|
+
customerTag: "重点客户",
|
|
70
|
+
manager: "张三",
|
|
71
|
+
contribution: 12000,
|
|
72
|
+
pass1: 98,
|
|
73
|
+
pass2: 87,
|
|
74
|
+
pass3: 93,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: 2,
|
|
78
|
+
name: "李小虎",
|
|
79
|
+
birthDate: "1992-07-21",
|
|
80
|
+
customerTag: "潜在客户",
|
|
81
|
+
manager: "李四",
|
|
82
|
+
contribution: 8600,
|
|
83
|
+
pass1: 88,
|
|
84
|
+
pass2: 90,
|
|
85
|
+
pass3: 85,
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
id: 3,
|
|
89
|
+
name: "赵六",
|
|
90
|
+
birthDate: "1988-11-02",
|
|
91
|
+
customerTag: "普通客户",
|
|
92
|
+
manager: "王五",
|
|
93
|
+
contribution: 5400,
|
|
94
|
+
pass1: 76,
|
|
95
|
+
pass2: 80,
|
|
96
|
+
pass3: 79,
|
|
97
|
+
},
|
|
98
|
+
],
|
|
99
|
+
// 列配置：用于驱动 el-table-column 渲染，同时作为拖拽排序的数据源
|
|
100
|
+
columns: [
|
|
101
|
+
{ key: "index", label: "#", width: 60, align: "center", isIndex: true },
|
|
102
|
+
{ key: "name", prop: "name", label: "姓名", width: 160, align: "center" },
|
|
103
|
+
{ key: "birthDate", prop: "birthDate", label: "出生日期", width: 140, align: "center", sortable: "custom" },
|
|
104
|
+
{ key: "customerTag", prop: "customerTag", label: "客户标签", width: 120, align: "center" },
|
|
105
|
+
{ key: "manager", prop: "manager", label: "客户人", width: 160, align: "center" },
|
|
106
|
+
{ key: "contribution", prop: "contribution", label: "贡献积分", width: 120, align: "right", headerAlign: "center" },
|
|
107
|
+
{ key: "pass1", prop: "pass1", label: "通关1", width: 100, align: "center" },
|
|
108
|
+
{ key: "pass2", prop: "pass2", label: "通关2", width: 100, align: "center" },
|
|
109
|
+
{ key: "pass3", prop: "pass3", label: "通关3", width: 100, align: "center" },
|
|
110
|
+
{ key: "operation", prop: "__operation__", label: "操作", width: 180, align: "center", headerAlign: "center", isOperation: true },
|
|
111
|
+
],
|
|
112
|
+
// sortablejs 实例引用，用于在组件销毁或重建时手动销毁，避免内存泄露
|
|
113
|
+
headerSortable: null,
|
|
114
|
+
// 用于强制重建 el-table（修改 key），确保列顺序变更后 ElementUI 内部状态与 DOM 同步
|
|
115
|
+
tableKey: 0,
|
|
116
|
+
// 标识组件是否已经进入销毁流程，避免销毁后仍然去访问 DOM 或创建 sortable 实例
|
|
117
|
+
isDestroyed: false,
|
|
118
|
+
};
|
|
119
|
+
},
|
|
120
|
+
mounted() {
|
|
121
|
+
// 组件挂载后，在下一个渲染周期中初始化表头拖拽能力
|
|
122
|
+
this.$nextTick(() => {
|
|
123
|
+
this.initColumnDrag();
|
|
124
|
+
});
|
|
125
|
+
},
|
|
126
|
+
beforeDestroy() {
|
|
127
|
+
// 组件销毁前：设置销毁标记并清理 sortable 实例，避免内存泄露
|
|
128
|
+
this.isDestroyed = true;
|
|
129
|
+
if (this.headerSortable && this.headerSortable.destroy) {
|
|
130
|
+
this.headerSortable.destroy();
|
|
131
|
+
this.headerSortable = null;
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
methods: {
|
|
135
|
+
// 初始化列拖拽：在 ElementUI 表格头部行（thead > tr）上绑定 sortable 实例
|
|
136
|
+
initColumnDrag() {
|
|
137
|
+
// 若组件已处于销毁阶段，直接返回，避免无意义的 DOM 访问
|
|
138
|
+
if (this.isDestroyed) return;
|
|
139
|
+
// 若已存在 sortable 实例，先销毁，避免重复绑定导致的事件堆积与内存泄露
|
|
140
|
+
if (this.headerSortable && this.headerSortable.destroy) {
|
|
141
|
+
this.headerSortable.destroy();
|
|
142
|
+
this.headerSortable = null;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// 通过 ref 获取 ElementUI 表格实例，再访问内部根元素
|
|
146
|
+
const table = this.$refs.draggableTable;
|
|
147
|
+
if (!table || !table.$el) return;
|
|
148
|
+
|
|
149
|
+
// ElementUI 表头 DOM：thead 里的第一行 tr，作为 sortable 容器
|
|
150
|
+
const headerRow = table.$el.querySelector(".el-table__header-wrapper thead tr");
|
|
151
|
+
if (!headerRow) return;
|
|
152
|
+
|
|
153
|
+
this.headerSortable = Sortable.create(headerRow, {
|
|
154
|
+
// 拖拽动画时长（毫秒）
|
|
155
|
+
animation: 150,
|
|
156
|
+
// 只允许拖拽 header-draggable 区域作为手柄，避免误拖整个表头
|
|
157
|
+
handle: ".header-draggable",
|
|
158
|
+
// 可被拖动的元素：表头单元格 th（索引列因没有 handle 实际不可拖拽）
|
|
159
|
+
draggable: "th",
|
|
160
|
+
// 拖拽结束时回调：根据新旧索引更新 columns 顺序
|
|
161
|
+
onEnd: (evt) => {
|
|
162
|
+
const { oldIndex, newIndex } = evt;
|
|
163
|
+
if (oldIndex == null || newIndex == null) return;
|
|
164
|
+
if (oldIndex === newIndex) return;
|
|
165
|
+
const from = oldIndex;
|
|
166
|
+
const to = newIndex;
|
|
167
|
+
if (from < 0 || to < 0 || from >= this.columns.length || to >= this.columns.length) return;
|
|
168
|
+
|
|
169
|
+
// 交换 columns 中两列的位置，实现“换列”
|
|
170
|
+
const list = this.columns.slice();
|
|
171
|
+
[list[from], list[to]] = [list[to], list[from]];
|
|
172
|
+
this.columns = list;
|
|
173
|
+
|
|
174
|
+
// 强制重建表格组件，避免 ElementUI 内部列状态与 DOM 拖拽产生偏差，
|
|
175
|
+
// 重建后在下一个 tick 重新绑定 sortable
|
|
176
|
+
this.tableKey += 1;
|
|
177
|
+
this.$nextTick(() => {
|
|
178
|
+
this.initColumnDrag();
|
|
179
|
+
});
|
|
180
|
+
},
|
|
181
|
+
});
|
|
182
|
+
},
|
|
183
|
+
handleSortChange({ prop, order }) {
|
|
184
|
+
if (!prop || !order) {
|
|
185
|
+
this.rows = this.rows.slice().sort((a, b) => a.id - b.id);
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
const list = this.rows.slice().sort((a, b) => {
|
|
189
|
+
const av = a[prop];
|
|
190
|
+
const bv = b[prop];
|
|
191
|
+
if (av === bv) return 0;
|
|
192
|
+
const result = av > bv ? 1 : -1;
|
|
193
|
+
return order === "ascending" ? result : -result;
|
|
194
|
+
});
|
|
195
|
+
this.rows = list;
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
};
|
|
199
|
+
</script>
|