浅说数据排序原创
# 浅说数据排序
笔记
不知怎么就和前端的数据预览排序杠上了 索性直接放这当个模板 反正应该都差不多吧
# 前序
这次这个呢 倒是和之前不是那么相似 记忆中之前接触过的涉及到置顶的操作 就以现在的这个为基本了 毕竟以前那么久了 也没代码 也记不清楚
# 话不多说 先看代码
# 页面
简单说下 就是个表格内的按钮 这里总共分为四个 上移 下移 删除 新增(此处的新增 设计为在当前行下方进行新增操作)
分别对应
dataUp()
dataDown()
delData()
pushData()
参数统一为当前行的下标 从0开始按钮参数说明 类型plan size type icon 没什么好说的 就是修改了大小样式图标什么的 主要是在上移 下移 删除时存在
disabled
禁用判断 作为首行或末行 肯定无法再往上升 或者 往下降 做禁用处理 删除考虑到新增按钮只存在单行数据中 如果没有数据 无法新增 (上移 下移 额外添加禁用标识toggleFlag
防止连点 反应不过来 我指的是人 不是代码)
detailForm.data
:数据
<el-table>
<el-table-column type="selection" fixed="left" width="55" align="center" />
<el-table-column label="操作" width="230px" align="center" fixed="left">
<template slot-scope="scope">
<!-- 上移 -->
<el-button
plain
size="mini"
type="primary"
icon="el-icon-top"
:disabled="scope.$index === 0 || toggleFlag"
@click="dataUp(scope.$index)"
/>
<!-- 下移 -->
<el-button
plain
size="mini"
type="primary"
icon="el-icon-bottom"
:disabled="scope.$index === detailForm.data.length - 1 || toggleFlag"
@click="dataDown(scope.$index)"
/>
<!-- 删除 -->
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
:disabled="detailForm.data.length === 1"
@click="delData(scope.$index)"
/>
<!-- 新增 -->
<el-button
size="mini"
type="primary"
icon="el-icon-plus"
@click="pushData(scope.$index)"
/>
</template>
</el-table-column>
<el-table-column type="index" fixed="left" label="序号" align="center" width="100" />
<el-table-column type="index" fixed="left" label="序号" align="center" width="100" />
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 函数
ok 样式大概就是这样了 没什么好说的 剩余部分呢 我们就看看那几个方法了
声明一下
toggleFlag
点击禁用标识 此处使用延迟 300 重新放开按钮 给他一个反应的时间 还是指人
# dataUp(scope.$index) 上移
dataUp(index) {
this.toggleFlag = true
// 当前要移动的数据信息
const data = this.detailForm.data[index]
// 当前数据信息的上一位 即将被拉下位的大哥
const upData = this.detailForm.data[index - 1]
// 延迟执行
setTimeout(() => {
// 这里其实就很简单了 位置替换 放开禁用标识
this.detailForm.data[index] = upData
this.detailForm.data[index - 1] = data
this.toggleFlag = false
}, 300)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# dataDown(scope.$index) 下移
// 和上移基本上没有什么区别 唯一的区别就是说 取的是当前数据的下一位数据 也就是要上位的大哥
// 然后就是一样的位置切换 放开标识
dataDown(index) {
this.toggleFlag = true
const data = this.detailForm.data[index]
const downData = this.detailForm.data[index + 1]
setTimeout(() => {
this.detailForm.data[index] = downData
this.detailForm.data[index + 1] = data
this.toggleFlag = false
}, 300)
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# delData(scope.$index) 删除
delData(index) {
// 这就比较简单了 毕竟数组都提供这种功能了
// 使用splice() 删除当前元素 参数1:要删除的下标 参数2:删除几个呢 此处使用1 那不就是他自己了
this.detailForm.data.splice(index, 1)
},
1
2
3
4
5
2
3
4
5
# pushData(scope.$index) 新增
pushData(index) {
let lastData = []
// 考虑到是在当前数据下行进行新增 这里区分一下是否作为末行的存在
const length = this.detailForm.data.length - 1
if (length !== index) {
// 不是末行的话 就先将剩余的数据 取出备用
lastData = this.detailForm.data.slice(index + 1, this.detailForm.data.length)
// 在当前数据行进行截取 丢弃剩余的数据
this.detailForm.data.splice(index + 1)
// 添加新的数据行
this.detailForm.data.push({
plmeid: uuidv4().replace(/-/g, '') // 这个是为了后续使用 添加的前端uuid标识
})
// 数据合并就好了
this.detailForm.data.push.apply(this.detailForm.data, lastData)
} else {
// 末行数据直接push就好了
this.detailForm.data.push({
plmeid: uuidv4().replace(/-/g, '') // 这个是为了后续使用 添加的前端uuid标识
})
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# END
这就算完结了 没什么东西 就是希望下次再来这种无聊的需求 cv就好了
上次更新: 2023/11/01, 15:16:13