The original address: www.jianshu.com/p/f9ee03084…

background

The test reported that the search input box, which was previously available, was suddenly unable to enter text.

Analysis of the code

Depending on the problem, look at the code first

<template>
    <el-table :data="[]">
      <el-table-column>
        <template slot="header">
          <h1>Table header: 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>
Copy the code

I don’t see any problems, but el-input just doesn’t work. Vue and Element-UI installed versions 2.6.14 and 2.15.3, respectively

At first, I suspected that slot was the problem, so I wrote a helloWord component built-in slot header, and then introduced the use

<! --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> Table header: 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 head:  template solt="header" </h1> <el-input v-model="name"></el-input> </template> </hello-world> </div> </template>Copy the code

Discovery can be entered normally, although both are V-model =”name”, but it can be found that the input box of the table is not bidirectional binding. Therefore, the problem of slot is excluded, so the problem of el-table-column is left. Also, this function was developed in the past and can be typed, but now it can not be typed, it should be the result of the element-UI upgrade. So I installed the old version of Element-UI. After many tests, it still didn’t work. Again, I guessed that the current VUE version was too high and didn’t match the old version of Element-UI. The test was abandoned.

If there is a problem, it must be solved.

  1. Go to the official bug modification, but time is running out, this is an urgent bug
  2. I’m going to fix it myself. I’m going to change the el-Input in the table slot to normal input, but I’m going to rewrite the style, and I can fix that.
  3. Let’s play around a little bit, and we’ll just write it differently. The following
    <el-table :data="[]">
      <el-table-column>
        <template #header>
          <h1>Table header: Template #header</h1>
          <el-input v-model="name"></el-input>
        </template>
      </el-table-column>
    </el-table>

Copy the code

Replace <template slot=”header”> with <template #header> with minimal changes.

The results of

The average person might think of the second, and the third is purely empirical. Because we have encountered another bug in 2.6.13 of vue slot before, and it has been officially fixed to 2.6.14.

In order to avoid this problem, the general project should try to lock down the version. However, our project was subcontracted by Lerna, which was very complicated and not locked due to historical reasons. Finally, take a closer look at the implementation of <el-table-column> at some point.