ElementPlus table上移下移操作、表格嵌套树选择器

步骤条圆圈中的数字根据所选样式展示：

 <el-stepsstyle="margin-top: 20px; max-width: 700px"align-center:active="formModel.testData.length + 1"><el-steptitle="Step 1"v-for="(item, index) in formModel.testData"><template v-slot:title>{{ item.label }}</template><template v-slot:icon><span v-if="formModel.status == '1'">{{ index + 1 }}</span><span v-if="formModel.status == '2'">{{ getIndex(index + 1) }}</span><span v-if="formModel.status == '3'">Step {{ index + 1 }}</span></template><template v-slot:description>{{ item.description }}</template></el-step><el-step title="退出导航"><template v-slot:icon><el-icon><Close /></el-icon></template></el-step></el-steps>

上移、下移操作方法：

// 上移函数let moveUp = (row) => {let index = formModel.testData.indexOf(row)if (index > 0) {let temp = formModel.testData[index - 1]formModel.testData[index - 1] = rowformModel.testData[index] = temp}}// 下移函数let moveDown = (row) => {let index = formModel.testData.indexOf(row)if (index < formModel.testData.length - 1) {let temp = formModel.testData[index + 1]formModel.testData[index + 1] = rowformModel.testData[index] = temp}}

<template><div class="app-container"><vue3-pro-tableref="proTable":request="getList":columns="tableColumn":search="searchConfig"><!-- 工具栏 --><template #toolbar><el-button type="success" @click="handleAdd">新建流程模型</el-button></template><!-- 表格操作栏 --><template #page-operate="{ row }"><el-button type="text" @click="handleDetails(row)">查看详情</el-button><el-button type="text" @click="handleUpdate(row)">修改</el-button><el-button type="text" @click="handleDelete(row)">删除</el-button></template></vue3-pro-table><!-- 添加或修改配置对话框 --><el-dialog v-model="open" :title="title" width="1000px" append-to-body><el-formref="formRef":model="formModel":rules="rules"label-width="120px":disabled="operation == 'details'"><el-card><template #header><span>流程模型名称</span></template><el-row :gutter="20"><el-col :span="12"><el-form-item label="流程模型名称" prop="name"><el-inputv-model="formModel.name"placeholder="请输入流程模型名称"/></el-form-item></el-col><el-col :span="12"><el-form-item label="状态码" prop="status"><el-selectv-model="formModel.status"placeholder="请选择状态码"><el-optionv-for="item in statusList":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item label="状态节点数量" prop="num"><el-input-numberv-model="formModel.testData.length"disabled:min="1":max="10"/></el-form-item></el-col></el-row></el-card><el-card style="margin-top: 20px"><template #header><span>流程节点信息</span></template><div class="table"><el-buttonstyle="float: right; margin-bottom: 15px"type="primary"size="small"@click="handleAddNode">添加节点</el-button><el-table :data="formModel.testData" style="overflow: auto;"><el-table-columntype="index"label="节点序号"width="100"></el-table-column><el-table-column label="节点菜单名称"><template #default="scope"><el-tree-selectref="treeSelect"node-key="id"value-key="id"v-model="formModel.testData[scope.$index].id":data="menuList":props="{label: 'label',value: 'id',children: 'children',}"filterableclearablehighlight-current:placeholder="`请选择节点${scope.$index + 1}`"@node-click="handleMenuChange(scope.$index, $event)"></el-tree-select></template></el-table-column><el-table-column label="页面操作说明"><template #default="scope"><el-inputv-model="formModel.testData[scope.$index].description"placeholder="请输入页面操作说明"/></template></el-table-column><el-table-column label="操作"><template #default="scope"><el-buttontype="text":disabled="scope.$index === 0"@click="moveUp(scope.row)">上移一级</el-button><el-buttontype="text":disabled="scope.$index === formModel.testData.length - 1"@click="moveDown(scope.row)">下移一级</el-button><el-button type="text" @click="handleFormDel(scope.row)">删除</el-button></template></el-table-column></el-table><el-buttonstyle="float: left; margin-top: 15px"type="text"size="small"@click="changeModel(openModel)">流程模型效果展示</el-button><div v-if="openModel" style="margin-top: 10px"><el-stepsstyle="margin-top: 20px; max-width: 700px"align-center:active="formModel.testData.length + 1"><el-steptitle="Step 1"v-for="(item, index) in formModel.testData"><template v-slot:title>{{ item.label }}</template><template v-slot:icon><span v-if="formModel.status == '1'">{{ index + 1 }}</span><span v-if="formModel.status == '2'">{{ getIndex(index + 1) }}</span><span v-if="formModel.status == '3'">Step {{ index + 1 }}</span></template><template v-slot:description>{{ item.description }}</template></el-step><el-step title="退出导航"><template v-slot:icon><el-icon><Close /></el-icon></template></el-step></el-steps></div></div></el-card></el-form><template #footer><div class="dialog-footer"><div v-if="operation == 'details'" class="dialog-footer"><el-button @click="cancel">关 闭</el-button></div><div v-else class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></div></template></el-dialog></div>
</template><script setup name="ProcessModel">import {addRole,deleteRole,getRole,getMenuTree as menuTreeselect,} from '@/api/system/role'import { Close } from '@element-plus/icons-vue'import { dict } from '@/utils/dict.js'import { takeLabel, queryAll } from '@/utils/tools.js'let proTable = $ref(null)const { proxy } = getCurrentInstance()let menuList = $ref([])/** 查询菜单树结构 */function getMenuTreeselect() {menuTreeselect().then((res) => {menuList = res.dataconsole.log('🚀 ~ menuTreeselect ~ menuList:', menuList)})}getMenuTreeselect()let formModel = $ref({name: '',status: '',num: 1,testData: [{id: '2001',label: '产品生命周期管理',},{id: '2011',label: '发布任务',},{id: 'E8UxcaK3q5hSKEvUcrzuxY',label: '订单管理',},],})let statusList = $ref([{value: '1',label: '1,2,3,4....',},{value: '2',label: '一,二,三,四....',},{value: '3',label: 'step1,step2,step3,step4....',},])const data = reactive({rules: {name: [{ required: true, message: '流程模型名称不能为空', trigger: 'blur' },],status: [{ required: true, message: '状态码不能为空', trigger: 'change' },],num: [{ required: true, message: '状态节点数量不能为空', trigger: 'change' },],},})const { rules } = toRefs(data)let open = $ref(false)let ids = $ref([])let title = $ref('')let searchConfig = {fields: [{label: '流程模型名称',name: 'roleName',type: 'text',},{label: '修改时间',name: 'cpid',type: 'daterange',},],}// 表格列配置，大部分属性跟el-table-column配置一样let tableColumn = [{ label: '序号', type: 'index', align: 'center' },{label: '流程模型名称',prop: 'roleName',align: 'center',},{label: '流程节点',prop: 'roleName',align: 'center',},{label: '修改时间',prop: 'createTime',align: 'center',},{label: '操作',fixed: 'right',align: 'center',width: 240,tdSlot: 'page-operate',},]/** 查询列表 */let getList = async (params) => {params = {...params,}let {list,page: { total },} = await getRole(params)return {list: list || [],total: total || 0,}}// 刷新let refresh = () => {proTable.refresh()}/** 删除按钮操作 */function handleDelete(row) {let roleIdsif (row && row.roleId) {roleIds = [row.roleId]} else {roleIds = ids}let params = {roleIds: roleIds,}proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds.join(',') + '"的数据项?').then(function () {return deleteRole(params)}).then(() => {refresh()proxy.$modal.msgSuccess('删除成功')}).catch(() => {})}/** 重置新增的表单以及其他数据  */function reset() {formModel.name = ''formModel.status = ''formModel.num = 1formModel.testData = [{id: '2001',label: '产品生命周期管理',},{id: '2011',label: '发布任务',},{id: 'E8UxcaK3q5hSKEvUcrzuxY',label: '订单管理',},]proxy.resetForm('formRef')}let operation = $ref('')/** 添加流程模型 */function handleAdd() {reset()open = truetitle = '新建流程模型'operation = 'add'console.log('🚀 ~ handleAdd ~ formModel:', formModel.testData)console.log('🚀 ~ handleAdd ~ menuList:', menuList)}/** 查看详情按钮操作 */function handleDetails(row) {reset()open = truetitle = '查看角色详情'operation = 'details'formModel = row}/** 修改角色 */function handleUpdate(row) {console.log('🚀 ~ handleUpdate ~ row:', row)operation = 'edit'reset()title = '修改角色'}/** 提交按钮 */function submitForm() {proxy.$refs['formRef'].validate((valid) => {if (valid) {console.log('🚀 ~ submitForm ~ formModel:', formModel)if (formModel.roleId != undefined) {// let params = {// }// updateRole(params).then((response) => {//   proxy.$modal.msgSuccess('修改成功')//   open = false//   refresh()// })} else {// let ids = getMenuAllCheckedKeys()// let params = {// }// addRole(params).then((response) => {//   proxy.$modal.msgSuccess('新增成功')//   open = false//   refresh()// })}}})}/** 取消按钮 */function cancel() {open = falsereset()}/** 改变状态节点数量 */let handleAddNode = () => {formModel.testData.push({id: '',label: '',description: '',})console.log('🚀 ~ handleAddNode ~ formModel.testData:', formModel.testData)}// 弹框表格选择菜单let handleMenuChange = (index, value) => {console.log('🚀 ~ handleMenuChange ~ value:', value)formModel.testData[index].id = value.idformModel.testData[index].label = value.labelconsole.log('🚀 ~ handleMenuChange ~ formModel.testData:',formModel.testData)}// 上移函数let moveUp = (row) => {console.log('🚀 ~ moveUp ~ row:', row)let index = formModel.testData.indexOf(row)console.log('🚀 ~ moveUp ~ index:', index)if (index > 0) {let temp = formModel.testData[index - 1]formModel.testData[index - 1] = rowformModel.testData[index] = temp}console.log('🚀 ~ moveUp ~ formModel.testData:', formModel.testData)}// 下移函数let moveDown = (row) => {let index = formModel.testData.indexOf(row)if (index < formModel.testData.length - 1) {let temp = formModel.testData[index + 1]formModel.testData[index + 1] = rowformModel.testData[index] = temp}}let openModel = $ref(false)// 改变模型效果展示let changeModel = (status) => {openModel = !status}// 弹框表格删除let handleFormDel = (row) => {formModel.testData.splice(formModel.testData.indexOf(row), 1)}let treeSelect = $ref(null)// 获取索引let getIndex = (num) => {if (num == 1) {return '一'} else if (num == 2) {return '二'} else if (num == 3) {return '三'} else if (num == 4) {return '四'} else if (num == 5) {return '五'} else if (num == 6) {return '六'} else if (num == 7) {return '七'} else if (num == 8) {return '八'} else if (num == 9) {return '九'} else if (num == 10) {return '十'}}
</script>
<style lang="scss" scoped>:deep(.el-step__icon) {position: relative;z-index: 1;display: inline-flex;justify-content: center;align-items: center;width: 46px;height: 46px;font-size: 14px;box-sizing: border-box;background: #fff;transition: 0.15s ease-out;}:deep(.el-step.is-horizontal .el-step__line) {// height: 2px;// top: 21px;// left: 0;// right: 0;}
</style>