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

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

 <el-steps
                style="margin-top: 20px; max-width: 700px"
                align-center
                :active="formModel.testData.length + 1"
              >
                <el-step
                  title="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] = row
      formModel.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] = row
      formModel.testData[index] = temp
    }
  }

<template>
  <div class="app-container">
    <vue3-pro-table
      ref="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-form
        ref="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-input
                  v-model="formModel.name"
                  placeholder="请输入流程模型名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态码" prop="status">
                <el-select
                  v-model="formModel.status"
                  placeholder="请选择状态码"
                >
                  <el-option
                    v-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-number
                  v-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-button
              style="float: right; margin-bottom: 15px"
              type="primary"
              size="small"
              @click="handleAddNode"
            >
              添加节点
            </el-button>
            <el-table :data="formModel.testData" style="overflow: auto;">
              <el-table-column
                type="index"
                label="节点序号"
                width="100"
              ></el-table-column>
              <el-table-column label="节点菜单名称">
                <template #default="scope">
                  <el-tree-select
                    ref="treeSelect"
                    node-key="id"
                    value-key="id"
                    v-model="formModel.testData[scope.$index].id"
                    :data="menuList"
                    :props="{
                      label: 'label',
                      value: 'id',
                      children: 'children',
                    }"
                    filterable
                    clearable
                    highlight-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-input
                    v-model="formModel.testData[scope.$index].description"
                    placeholder="请输入页面操作说明"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    type="text"
                    :disabled="scope.$index === 0"
                    @click="moveUp(scope.row)"
                  >
                    上移一级
                  </el-button>
                  <el-button
                    type="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-button
              style="float: left; margin-top: 15px"
              type="text"
              size="small"
              @click="changeModel(openModel)"
            >
              流程模型效果展示
            </el-button>
            <div v-if="openModel" style="margin-top: 10px">
              <el-steps
                style="margin-top: 20px; max-width: 700px"
                align-center
                :active="formModel.testData.length + 1"
              >
                <el-step
                  title="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.data
      console.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 roleIds
    if (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 = 1
    formModel.testData = [
      {
        id: '2001',
        label: '产品生命周期管理',
      },
      {
        id: '2011',
        label: '发布任务',
      },
      {
        id: 'E8UxcaK3q5hSKEvUcrzuxY',
        label: '订单管理',
      },
    ]
    proxy.resetForm('formRef')
  }
  let operation = $ref('')
  /** 添加流程模型 */
  function handleAdd() {
    reset()
    open = true
    title = '新建流程模型'
    operation = 'add'
    console.log('🚀 ~ handleAdd ~ formModel:', formModel.testData)
    console.log('🚀 ~ handleAdd ~ menuList:', menuList)
  }

  /** 查看详情按钮操作 */
  function handleDetails(row) {
    reset()
    open = true
    title = '查看角色详情'
    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 = false
    reset()
  }
  /** 改变状态节点数量 */
  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.id
    formModel.testData[index].label = value.label
    console.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] = row
      formModel.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] = row
      formModel.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>