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

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 13: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月13日
  • 已采纳回答 12月6日
  • 修改了问题 12月3日
  • 修改了问题 12月3日
  • 展开全部

悬赏问题

  • ¥15 mybatis自定义sql VO赋值不上去
  • ¥15 MC9S12XS128单片机开发板实验
  • ¥15 WSL上下载的joern在windows怎么用?
  • ¥15 jetson nano4GB
  • ¥15 电脑回复出厂设置,重装过程报错提示,求解决方案Windows 无法分析或处理无人参与应答文件 [C:\WINDOWS\Panther\unattend.xml,如何解决?
  • ¥15 进入lighttools中的UDOP编辑器的方法
  • ¥15 求Gen6d训练数据集
  • ¥20 liunx中winscp中可以登入ftp,但是不能登入sftp,如何解决
  • ¥15 lighttools的光学属性自定义的用法流程
  • ¥15 uni-app动态修改推荐页标题时报错
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部