发现el-input在el-table-column slot="header"中输入不了的bug

背景

测试反馈说之前可以输入的搜索输入框,现在突然输入不了文字了。

分析代码

根据问题,先看代码有没有问题

<template>
    <el-table :data="[]">
      <el-table-column>
        <template slot="header">
          <h1> 表格头部: template slot="header" </h1>
          <el-input v-model="name"></el-input>
        </template>
      </el-table-column>
    </el-table>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      name: "",
    };
  },
};
</script>
image.png

看不出什么问题,但是el-input就是输入不了文字,vue 与element-ui安装的版本分别是2.6.14 与 2.15.3


image.png

一开始怀疑是slot的问题,于是我自己写了个helloword组件内置插槽header,然后再引入使用

<!--helloword.vue-->
 <div class="hello">
    <slot name='header' />
 </div>


<!--App.vue-->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />

    <el-table :data="[]">
      <el-table-column>
        <template slot="header">
          <h1> 表格头部: template slot="header" </h1>
          <el-input v-model="name"></el-input>
        </template>

      </el-table-column>
    </el-table>
<br>
<br>
<br>

    <hello-world>
      <template slot="header">
        <h1 style="text-aligh: center;">helloworld 头部: template solt="header" </h1>
        <el-input v-model="name"></el-input>
      </template>
    </hello-world>
  </div>
</template>
image.png

发现可以正常输入,虽然都是v-model="name", 但是可以发现表格的输入框没有双向绑定。因此就排除掉是slot的问题了,那么就剩下是el-table-column的问题了。而且这功能是以前开发的可以输入,现在不行,应该是element-ui升级导致的。于是我安装了老版本的element-ui,经过多次测试还是不行,再次猜测可能是现在vue版本太高了,和element-ui老版本不匹配。放弃测试了。

既然有问题,那就要解决了,方案:

  1. 去官方提bug修改,但是时间不等人,这是紧急bug
  2. 自己修复,我一开始直接把表格插槽中el-input 换成普通input,没问题,就是样式要重写一下,这可以解决。
  3. 再折腾一下,发现换个写法就行了。如下
<el-table :data="[]">
      <el-table-column>
        <template #header>
          <h1>表格头部: template #header</h1>
          <el-input v-model="name"></el-input>
        </template>
      </el-table-column>
    </el-table>

把<template slot="header">换成<template #header>,改动最小。

结果

一般人可能会想到第2种,第3种纯属巧合。因为之前我们就遇到vue的2.6.13版本在插槽这块有另外的bug。

为了避免这种问题,一般项目还是尽量锁定写死版本吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容