Xyt1737 2021-12-03 17:26 采纳率: 100%
浏览 291
已结题

vue3+element-plus+js 表格里点击单元格显示input输入框并且校验数据,点击单元格外不显示

问题遇到的现象和发生背景

点击单元格不显示输入框

img

问题相关代码,请勿粘贴截图
<el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>分类树</span>
          </div>
        </template>
        <el-table
          border
          :data="tableData"
          row-key="id"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column label="名称" prop="componentName" />
          <el-table-column label="对应编码" prop="componentId">
            <template #default="scope">
              <span
                v-if="scope.row.componentId == false"
                @click="inputClick(scope.row)"
              >
                {{ scope.row.componentId }}
              </span>
              <el-input
                v-else
                v-model="scope.row.componentId"
                @blur="inputBlur"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>


  import { ref } from 'vue'

  export default {
    setup() {
      //   const inputClick = (row) => {
      //   }
      //   const inputBlur = (row) => {
      //   }
      return {
        tableData: [
          {
            id: 1,
            componentName: 'com.ander.root',
            componentId: '',
            children: [
              {
                id: 31,
                componentName: '4零件',
                componentId: '',
              },
              {
                id: 32,
                componentName: '1原材料',
                componentId: '',
              },
              {
                id: 31,
                componentName: '6半成品',
                componentId: '',
              },
              {
                id: 32,
                componentName: '3电气液压件',
                componentId: '',
              },
              {
                id: 31,
                componentName: '5包材',
                componentId: '',
              },
              {
                id: 32,
                componentName: '1原材料',
                componentId: '',
              },
            ],
          },
        ],
        // inputClick,
        // inputBlur,
      }
    },
  }

运行结果及报错内容

img

我的解答思路和尝试过的方法

一团乱麻,啥都不会,对3的语法属实没搞明白
由于没有后台数据,所以都是自己模拟的数据

我想要达到的结果

img

img

img


希望多写写注释,谢谢了!

  • 写回答

2条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-04 21:10
    关注
    
    <template>
      <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>分类树</span>
              </div>
            </template>
            <el-table
              border
              :data="tableData"
              row-key="id"
              style="width: 100%; margin-bottom: 20px"
            >
    
              <!-- element table组件的插槽实现展开 -->
              <el-table-column type="expand">
                <template #default="props">
                </template>
              </el-table-column>
             <!-- 实现展开 -->
    
              <el-table-column label="名称" prop="componentName" />
              <el-table-column label="对应编码" prop="componentId">
                <template #default="scope">
                  <!-- 如果当前的行id不等于被激活的id,就显示span,否则显示输入框 -->
                  <span
                  style="width: 100%;display:inline-block"
                    v-if="acitveComponentId !== scope.row.componentId"
                    @click="inputClick(scope.row)"
                  >
                    {{ scope.row.componentId }}
                  </span>
                  <el-input
                    v-else
                    v-model="scope.row.componentId"
                    @blur="inputBlur"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
     
    </template>
    
    <script lang="ts">
      import { reactive, ref,onMounted  } from 'vue'
     
      export default {
        setup() {
          //声明个响应式数据,记录被激活的行id
            let acitveComponentId = ref('')
            const inputClick = (row:any) => {
              //点击span,赋值激活的id
              acitveComponentId.value = row.componentId 
            }
            const inputBlur = (row:any) => {
              //输入框失去焦点,将激活的id清空
              acitveComponentId.value = ''
            }
    
            onMounted(()=>{
      
            })
          return {
            acitveComponentId,
            tableData: [
              {
                id: 1,
                componentName: 'com.ander.root',
                componentId: '11213',
                children: [
                  {
                    id: 31,
                    componentName: '4零件',
                    componentId: '54645',
                  },
                  {
                    id: 32,
                    componentName: '1原材料',
                    componentId: '789879',
                  },
                  {
                    id: 31,
                    componentName: '6半成品',
                    componentId: '875666',
                  },
                  {
                    id: 32,
                    componentName: '3电气液压件',
                    componentId: '4564',
                  },
                  {
                    id: 31,
                    componentName: '5包材',
                    componentId: '8797',
                  },
                  {
                    id: 32,
                    componentName: '1原材料',
                    componentId: '5677',
                  },
                ],
              }, 
            ],
            inputClick,
            inputBlur,
          }
        },
        mounted() {
          
        }
      }
     
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月14日
  • 已采纳回答 12月6日
  • 修改了问题 12月3日
  • 修改了问题 12月3日
  • 展开全部

悬赏问题

  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题
  • ¥15 代码问题:df = pd.read_excel('c:\User\18343\Desktop\wpsdata.xlxs')路径读不到
  • ¥15 为什么视频算法现在全是动作识别?
  • ¥15 编写一段matlab代码
  • ¥15 用Python做岩石类别鉴定软件
  • ¥15 关于调取、提交更新数据库记录的问题
  • ¥15 之前删了盘从下vs2022遇见这个问题 搞了一整天了
  • ¥15 从Freecad中宏下载的DesignSPHysics,出现如下问题是什么原因导致的(语言-python)