表格数据上下移动
本文已参与「新人创作礼」活动，一起开启掘金创作之路。
这个需求是我第一遇到，所以不知道如何实现，于是在网上找了大半天，最后发现一个比较接近的。根据自己的理解，改造于是有了这文章。我们先看看效果吧。
图一
页面代码
<template>
<div>
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="108px" class="chy-search-form">
<div class="chy-search-row">
<div class="chy-search-clo-last">
<div class="chy-search-clo-last-left">
<el-form-item label="分类名称" prop="name">
<el-input v-model="queryParams.classifiedName" placeholder="请输入分类名称" clearable size="small"
@keyup.enter.native="handleQuery" />
</el-form-item>
</div>
<div class="chy-search-clo-last-right">
<el-form-item>
<el-button icon="el-icon-search" size="mini" class="chy-search-searchbtn" @click="handleQuery">搜索
</el-button>
<el-button icon="el-icon-refresh" class="chy-search-resetbtn" size="mini" @click="resetQuery">重置
</el-button>
</el-form-item>
</div>
</div>
<div class="chy-search-clo"></div>
<div class="chy-search-clo"></div>
</div>
</el-form>
<div class="chy-table">
<!-- <el-row :gutter="10" class="chy-mb8">
<div class="top-right-btn">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
class="item"
@click="handleAdd"
v-hasPermi="['system:dept:add']"
>新增</el-button
>
</el-col>
</div>
</el-row> -->
<el-table v-loading="loading" :data="serviceClassifiedList" row-key="classifiedId" default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :height="tableHeight"
:row-style="{ height: '30px' }" :default-sort="{prop: 'classifiedSort', order: 'descending'}">
<el-table-column prop="classifiedName" label="分类名称"></el-table-column>
<el-table-column prop="classifiedSort" label="排序" :sort-orders="['descending']" :sort-by="['classifiedSort']" v-if="false"></el-table-column>
<el-table-column label="状态" width="100">
<template slot-scope="scope">
<el-switch v-if="scope.row.level != 1" v-model="scope.row.state" :active-value=1 :inactive-value=0
@change="handleStatusChange(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" width="350" align="center">
<template slot-scope="scope">
<div class="chy-btn-list">
<div class="chy-btn-item">
<el-button v-if="scope.row.level != 1" type="text" class="chy-btn-edit"
v-hasPermi="['service:classified:edit']"
@click="addAndEditSonItem(scope.row, 'edit')">编辑</el-button>
</div>
<div class="chy-btn-item">
<el-button type="text" class="chy-btn-view" v-if="scope.row.level != 3"
v-hasPermi="['service:classified:add']"
@click="addAndEditSonItem(scope.row, 'add')">新增</el-button>
</div>
<div class="chy-btn-item">
<el-button type="text" @click="goWhere(scope, true)" :disabled="scope.row.indexLine[scope.row.indexLine.length - 1] == 0">上移</el-button>
</div>
<div class="chy-btn-item">
<el-button type="text" @click="goWhere(scope, false)" :disabled="scope.row.indexLine[scope.row.indexLine.length - 1] + 1 == scope.row.parentLength">下移
</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!--添加或修改分类 -->
<el-dialog :title="title" :visible.sync="open" width="1250px" append-to-body custom-class="chy-dialog">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :label-position="labelPosition">
<!-- 用户信息新增和修改 begin -->
<div class="chy-add-update-box">
<div class="chy-box show-form">
<!-- <ChyTitle title="附件信息"></ChyTitle> -->
<div class="chy-box-card">
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="上级分类" prop="parentId">
<treeselect v-model="form.parentId" :options="serviceClassifiedList" :normalizer="normalizer" :disabled="treeIsDisabled"
placeholder="选择上级分类" />
</el-form-item>
</div>
<div class="chy-box-col">
<el-form-item label="子分类名称" prop="classifiedName">
<el-input v-model="form.classifiedName" maxlength="50" show-word-limit />
</el-form-item>
</div>
</div>
</div>
</div>
<!-- <ChyReadOnly></ChyReadOnly> -->
</div>
<!-- 用户信息新增和修改 end -->
</el-form>
<div slot="footer" class="chy-dialog-footer" v-if="actionType != 'query' ? true : false">
<div class="chy-dialog-footer-btn-item-left">
<el-button @click="cancel" class="chy-btn-cancel">取 消</el-button>
</div>
<div class="chy-dialog-footer-btn-item-right">
<el-button class="chy-btn-ok" @click="submitForm">确 定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
//https://blog.csdn.net/qq_30306717/article/details/123260824
import {
xxxxxx
//https://www.vue-treeselect.cn/#disable-item-selection
} from "@/api/demo";
import Treeselect from "@riophae/vue-treeselect";//
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: 'chyTabMerchant',//加盟商
components: {
Treeselect
},
props: {
},
data() {
return {
showSearch: true,
queryParams: {
classifiedName: undefined
},
tableHeight: 520,
loading: false,
title: '',
open: false,
actionType:'add',
form: {},
rules: {
parentId: [
{ required: true, message: "上级分类不能为空!", trigger: "blur" },
],
classifiedName: [
{ required: true, message: "子分类不能为空!", trigger: "blur" },
],
},
labelPosition: "right",
serviceClassifiedList: [],
treeIsDisabled:false
}
},
created() {
this.getList();
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 323; //单行的
//后面100一般是根据你上下导航栏的高度来减掉即可。
});
},
methods: {
//搜索
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
getList() {
// this.loading = true;
listClassified(this.queryParams.classifiedName).then((response) => {
// console.log(response,"response")
this.serviceClassifiedList = this.handleTree(response.data, "classifiedId");
this.tableDataHandle(this.serviceClassifiedList, 'children')
//console.log(this.serviceClassifiedList,"serviceClassifiedList")
});
},
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.classifiedId,
label: node.classifiedName,
children: node.children,
};
},
goWhere(scrow, flag) {
this.upAndDown(scrow.row.indexLine, flag, scrow.row)
this.tableDataHandle(this.serviceClassifiedList, 'children')
},
// 上下移动
//参数是 位置数组，处理表示，行数据
upAndDown(target, flag, row) {
let temTable
if (target.length == 1) {
temTable = this.serviceClassifiedList
} else {
temTable = this.getParent(target).children
}
let index = target[target.length - 1];//获取表格所在位置
// console.log(index,"index")
if (flag === 1) { // 置顶
temTable.splice(index, 1);
temTable.unshift(row)
return
}
if (flag === 0) {
temTable.splice(index, 1);
temTable.push(row)
return;
}
let requestData={
classifiedId:'',
parentId:0,
displacementType:1//操作位移类型,1:上移，2下移
}
if (flag) { //上移
let upData = temTable[index - 1]
let upData2 = temTable[index]
temTable.splice(index - 1, 1);
temTable.splice(index, 0, upData);
//console.log(upData2,"upData")
requestData.classifiedId=upData2.classifiedId;
requestData.parentId=upData2.parentId;
requestData.displacementType=1;
this.operateDisplacementMove(requestData);
} else { //下移
let downData = temTable[index + 1]
let downData2 = temTable[index]
temTable.splice(index + 1, 1);
temTable.splice(index, 0, downData);
//console.log(downData2,"downData")
requestData.classifiedId=downData2.classifiedId;
requestData.parentId=downData2.parentId;
requestData.displacementType=2;
this.operateDisplacementMove(requestData);
}
},
operateDisplacementMove(requestData){
operateDisplacement(requestData).then(response => {
this.msgSuccess("操作成功");
this.getList();
});
},
// 精确到父亲,这里想不到合适的回调函数，直接写死了 //返回父级层数据
getParent(target) {
// console.log(target,"target")
switch (target.length) {
case 1:
return this.serviceClassifiedList
break
case 2:
return this.serviceClassifiedList[target[0]]
break
case 3:
return this.serviceClassifiedList[target[0]].children[target[1]]
break
case 4:
return this.serviceClassifiedList[target[0]].children[target[1]].children[target[2]]
break
case 5:
return this.serviceClassifiedList[target[0]].children[target[1]].children[target[2]].children[target[3]]
break
case 6:
return this.serviceClassifiedList[target[0]].children[target[1]].children[target[2]].children[target[3]].children[target[4]]
break
case 7:
return this.serviceClassifiedList[target[0]].children[target[1]].children[target[2]].children[target[3]].children[target[4]][target[5]]
break
}
},
// 数据处理递归处理
tableDataHandle(arr, key, levelIndex = 0, indexLine = []) {
levelIndex = levelIndex + 1
arr.map((item, idx) => {
item.levelIndex = levelIndex//层级
item.indexLine = Object.assign([], indexLine)//所在位置的数组
item.indexLine.push(idx)//每级的序号
item.parentLength = arr.length //每级总长度
if (item[key]) {
this.tableDataHandle(item[key], key, levelIndex, item.indexLine)
}
})
return arr
},
handleStatusChange(row) {
let text = row.state === 1 ? "启用" : "停用";
this.$confirm(
'确认要' + text + '【' + row.classifiedName + '】吗?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
let paremData={
classifiedId:row.classifiedId,
level:row.level,
state:row.state,
}
return editState(paremData);
})
.then(() => {
this.msgSuccess(text + "成功");
this.getList();
})
.catch(function () {
row.state = row.state === 0 ? 1 : 0;
this.getList();
});
},
//新增和修改分类
addAndEditSonItem(row, type) {
if (type == "add") {
this.title = "添加分类"
this.actionType='add'
this.form.parentId=row.classifiedId;
this.form.level=row.level+1;
this.form.classifiedName="";
this.form.serviceObjectType=1;
this.treeIsDisabled=true;
}
else {
this.title = "修改分类"
this.actionType='edit';
this.form={...row};
this.treeIsDisabled=false;
}
this.open = true;
},
//取消
cancel() {
this.open = false;
this.treeIsDisabled=false;
},
//保存
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.classifiedId != null&&this.actionType!='add') {
updateClassified(this.form).then(response => {
this.buttonLoading = false;
this.msgSuccess("修改成功");
this.open = false;
this.getList();
this.treeIsDisabled=false;
});
} else {
addClassified(this.form).then(response => {
this.buttonLoading = false;
this.msgSuccess("新增成功");
this.open = false;
this.getList();
this.treeIsDisabled=false;
});
}
}
});
}
}
}
//https://blog.csdn.net/weixin_34113237/article/details/94239464 排序
</script>
<style scoped lang="scss">
@import "@/assets/styles/chy/chy-dialog.scss";
.chy-add-update-box {
height: 200px !important;
}
.show-form {
height: 200px !important;
}
</style>
为了便于展示我把api获得数据提炼处理
serviceClassifiedList: [{
"creatorId": 1,
"createTime": "2022-05-26 09:18:58",
"updateId": null,
"updateTime": null,
"classifiedId": "1529633154780332033",
"serviceObjectType": 1,
"classifiedName": "测试投诉1",
"parentId": "1529633128792424450",
"level": 3,
"classifiedSort": 16,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-26 09:18:52",
"updateId": null,
"updateTime": null,
"classifiedId": "1529633128792424450",
"serviceObjectType": 1,
"classifiedName": "测试投诉",
"parentId": "1524302140267126786",
"level": 2,
"classifiedSort": 15,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-26 09:04:23",
"updateId": 1,
"updateTime": "2022-05-26 09:29:56",
"classifiedId": "1529629484412010497",
"serviceObjectType": 1,
"classifiedName": "大泵头问题",
"parentId": "1524302211566100481",
"level": 3,
"classifiedSort": 14,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-26 09:04:31",
"updateId": 1,
"updateTime": "2022-05-26 09:29:48",
"classifiedId": "1529629516485853186",
"serviceObjectType": 1,
"classifiedName": "小泵头问题吧",
"parentId": "1529629352211742722",
"level": 3,
"classifiedSort": 13,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:18:36",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302939504336898",
"serviceObjectType": 1,
"classifiedName": " 电机坏了",
"parentId": "1524302080900947969",
"level": 2,
"classifiedSort": 12,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 18:16:28",
"updateId": null,
"updateTime": null,
"classifiedId": "1524332604220231681",
"serviceObjectType": 1,
"classifiedName": "测试数据",
"parentId": "1524332344928358402",
"level": 3,
"classifiedSort": 11,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 18:16:06",
"updateId": null,
"updateTime": null,
"classifiedId": "1524332511513530370",
"serviceObjectType": 1,
"classifiedName": "第三级",
"parentId": "1524332344928358402",
"level": 3,
"classifiedSort": 10,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 18:17:37",
"updateId": null,
"updateTime": null,
"classifiedId": "1524332890968018946",
"serviceObjectType": 1,
"classifiedName": "第三级测试",
"parentId": "1524332344928358402",
"level": 3,
"classifiedSort": 9,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-26 09:03:51",
"updateId": null,
"updateTime": null,
"classifiedId": "1529629352211742722",
"serviceObjectType": 1,
"classifiedName": "泵头类",
"parentId": "1524302080900947969",
"level": 2,
"classifiedSort": 8,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 18:15:26",
"updateId": null,
"updateTime": null,
"classifiedId": "1524332344928358402",
"serviceObjectType": 1,
"classifiedName": "测试y555",
"parentId": "1524302080900947969",
"level": 2,
"classifiedSort": 7,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:18:18",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302865294516225",
"serviceObjectType": 1,
"classifiedName": " 电机泵体",
"parentId": "1524302080900947969",
"level": 2,
"classifiedSort": 6,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:17:52",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302757094055938",
"serviceObjectType": 1,
"classifiedName": " 电气",
"parentId": "1524302080900947969",
"level": 2,
"classifiedSort": 5,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:15:42",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302211566100481",
"serviceObjectType": 1,
"classifiedName": "其它问题",
"parentId": "0",
"level": 1,
"classifiedSort": 4,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:15:11",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302080900947969",
"serviceObjectType": 1,
"classifiedName": "设备问题",
"parentId": "0",
"level": 1,
"classifiedSort": 3,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:15:25",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302140267126786",
"serviceObjectType": 1,
"classifiedName": "投诉问题",
"parentId": "0",
"level": 1,
"classifiedSort": 2,
"state": 1
}, {
"creatorId": 1,
"createTime": "2022-05-11 16:15:00",
"updateId": null,
"updateTime": null,
"classifiedId": "1524302034444836865",
"serviceObjectType": 1,
"classifiedName": "场地问题",
"parentId": "0",
"level": 1,
"classifiedSort": 1,
"state": 1
}
]
大家有好的方法，可以留言一起探讨下。
