element 表格 选中当前一行 点击添加附件 新增加的内容编号是带有-1 如图效果

在使用Vue.js开发的表格中,遇到一个问题:点击添加附件时,新生成的内容编号错误地显示为已存在行的编号加1,期望实现的是根据选中行的编号正确添加。同时,希望添加附件后的新行不再显示'添加附件'功能。寻求解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

在这里插入图片描述
我想要的效果是222222-编号也是1 2 3 这样 现在做出来的 就是上面1111111添加以后 再点222222这条信息 加附件出来的 就是1111111后面的编号 我想要的是222222-1这样的 而且也不想让 添加附件出来的信息 有加附件这个功能 求大佬指点指点萌新
源码是这样的html部分在这里插入代码片`

<template>
  <div class="about">
    <div class="detailsForm">
      <el-button type="primary" size="small" @click="editAll">批量编辑</el-button>
      <el-button type="success" size="small" @click="submits">提交</el-button>
      <el-button type="primary" size="small" @click="addAll">批量增加</el-button>
      <el-button type="success" size="small" @click="delectAll">批量删除</el-button>
      <el-table :data="tabledatas" border @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column align="center" label="编号">
          <template slot-scope="scope">
            <span v-if="scope.row.show">
              <el-input size="mini" placeholder="请输入内容" v-model="scope.row.clothingCoding"></el-input>
            </span>
            <span v-else>{
   
   {
   
   scope.row.clothingCoding}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="年级">
          <template slot-scope="scope">
            <span v-if="scope.row.show">
              <el-input size="mini" placeholder="请输入内容" v-model
<template> <el-container class="layout-container-demo" style="height: 500px"> <el-header style="text-align: right; font-size: 12px"> <div class="toolbar"> <el-dropdown> <el-icon style="margin-right: 8px; margin-top: 1px"> <setting /> </el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item @click="logOut()">退出登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <span>关宇航</span> </div> </el-header> <el-container> <el-aside width="200px"> <el-scrollbar> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true"> <template v-for="(item, index) in menuList"> <el-menu-item v-if="isShow(item)" :index="index" :route="item.path">{{ item.label }}</el-menu-item> </template> </el-menu> </el-scrollbar> </el-aside> <el-main> <router-view /> </el-main> </el-container> </el-container> </template> <script setup> import { Menu as IconMenu, Setting } from '@element-plus/icons-vue' import useUserStore from '@/store/modules/user'; import { ElMessage } from 'element-plus' const userStore = useUserStore(); const router = useRouter(); const menuList = ref([]); function isShow(item) { return item?.aaaaa != 'asaf' } onMounted(() => { if (userStore.isLogin()) { setMenu(router.options.routes); } else { ElMessage.error(‘用户未登录,跳转至登录页面’); router.push(‘/’); } }); function setMenu(routes) { const menu = []; for (const route of routes) { if (route.children) { for (const child of route.children) { if (child.meta && child.meta.title) { const menuItem = { index: child.path, path: route.path + ‘/’ + child.path, label: child.meta.title, aaaaa: child.meta.aaaaa, }; menu.push(menuItem); } } } } menuList.value = menu } function logOut() { userStore.logOut(); ElMessage.success(‘已退出登录’); router.push(‘/’); } </script> <style scoped> .layout-container-demo .el-header { position: relative; background-color: var(--el-color-primary-light-7); color: var(--el-text-color-primary); } .layout-container-demo .el-aside { color: var(--el-text-color-primary); background: var(--el-color-primary-light-8); height: 100vh; } .layout-container-demo .el-menu { border-right: none; } .layout-container-demo .el-main { padding: 0; } .layout-container-demo .toolbar { display: inline-flex; align-items: center; justify-content: center; height: 100%; right: 20px; } </style> 我想把 用户管理画面,项目一览画面,项目管理画面 ,障碍票一览画面,障碍票详细画面 加入上部导航栏中,然后在丰富一下画面内容 用<template>画
最新发布
07-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值