Dutt
侠客
侠客
  • 最后登录2023-09-04
  • 发帖数11
阅读:1996回复:0

[vue]解决element-ui Table表格中input无法输入的问题

楼主#
更多 发布于:2023-04-13 20:51
<el-table-column
    prop="number"
    label="数量"
    align="center"
    >
        <template slot-scope="scope">
            <el-input v-model="scope.row.number" type="number" size="mini" @change="handleChange"  placeholder="请输入内容"></el-input>
        </template>
</el-table-column>
    使用 element ui 中 表格 嵌套 输入框 ,下拉框等,会出现 无法 获取数据的情况,原因是嵌套的太深了


可以看到,图片上标出的输入框,此时是无法输入得,
附上代码


<el-table-column
   prop="number"
   label="数量"
   align="center"
   >
    <template slot-scope="scope">
        <el-input v-model="scope.row.number" type="number" size="mini" placeholder="请输入内    容"></el-input>
    </template>
</el-table-column>
可以在el-ipnut组件上使用 @input="() => $forceUpdate()" 使用强制更新,来让页面得输入框恢复正常



<el-table-column
    prop="number"
    label="数量"
    align="center"
    >
        <template slot-scope="scope">
            <el-input v-model="scope.row.number" type="number" size="mini" @input="() => $forceUpdate()" placeholder="请输入内容"></el-input>
        </template>
</el-table-column>

也可以在上面加一个change事件
handleChange(value) {
      console.log(value);
      this.$forceUpdate();  //强制刷新
    },
游客


返回顶部

公众号

公众号