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

Question

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

点击单元格不显示输入框

问题相关代码，请勿粘贴截图

<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,
      }
    },
  }

运行结果及报错内容

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

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

我想要达到的结果

希望多写写注释，谢谢了！

Answer 1

<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>