el-table 自定义 header 中 el-input 绑定失效问题
之前有个需要在 element 的 table 的表头进行搜索,这个例子在 element 的文档上是有的,所以我写的时候也就没想太多,直接就按着官网上的例子写,代码很简单,类似这样:
<el-table-column prop="name">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
</el-table-column>
但是因为我开了 eslint,上面我写了 slot-scope="scope"
但是下面我并没有用到 scope ,所以编辑器就有波浪线提醒我,我看着别扭,并且想着这行代码删了应该也没有影响,因为 search 是现在当前页面的,于是就把这段代码删了,然后去测试,结果发现文字怎么也输入不上去,而且控制台也不报错,我仔仔细细看了一遍,看是不是拼写什么的有没有问题,但一圈检查下来发现也没问题。
最后我只能跟官网的代码去对比,发现差了 slot-scope="scope"
这个属性,我把这个属性加上,果然就正常了。
查看 demo。
翻阅了element 跟 vue 的文档也并没有这方面的说明。因为之前也在 slot 中写过类似功能的代码,但是并没有出什么问题,因为代码中用到的绑定值,要筛选的列表值都是定义在当前页面并且完全没有用到 scope 中的值。所以原因我目前也还不知道,只能先把这个坑记录下来。