使用elementui中的el-table,在表头里面加入输入框,但是输入框输入不进去值
<el-table
:data="records"
highlight-current-row
height="60px"
style="min-height: 100%"
>
<el-table-column align="center">
<template slot="header" slot-scope="scope">
<p>商家</p>
<el-input
v-model="merchant"
clearable
size="small"
></el-input>
</template>
<template slot-scope="scope">
<span>{{ scope.row.merchant}}</span>
</template>
</el-table-column>
</el-table>
因为用了eslint没有使用变量的话会报错,所以上面的代码<template slot="header" slot-scope="scope">
会报scope定义了但是没有使用的错误,这时候如果把slot-scope="scope"删掉,确实就没有eslint报错问题了,但是就会出现里面的输入框输入不了值的问题,想输入值在template里面必须加slot-scope=“scope”
解决方法1:为了解决eslint报错,可以在报错的语句上面加上注释(<!-- eslint-disable-next-line -->
),让eslint不再进行检验,正确的代码如下:
<el-table
:data="records"
highlight-current-row
height="60px"
style="min-height: 100%"
>
<el-table-column align="center">
<!--在报错的行上加入下面的注释 -->
<!-- eslint-disable-next-line -->
<template slot="header" slot-scope="scope">
<p>商家</p>
<el-input
v-model="merchant"
clearable
size="small"
></el-input>
</template>
<template slot-scope="scope">
<span>{{ scope.row.merchant}}</span>
</template>
</el-table-column>
</el-table>
解决方法2:将slot="header"换成#header,就不用加后面的slot-scope="scope"了。
<el-table
:data="records"
highlight-current-row
height="60px"
style="min-height: 100%"
>
<el-table-column align="center">
<template #header>
<p>商家</p>
<el-input
v-model="merchant"
clearable
size="small"
></el-input>
</template>
<template slot-scope="scope">
<span>{{ scope.row.merchant}}</span>
</template>
</el-table-column>
</el-table>