解决在ElementUI中表格列中添加输入框后,输入框无法输入内容问题
在写表格时有需求,需要在表格列中嵌套输入框,然后按照常规方法,套用elementUI里的组件,样式写好后发现输入框没办法用,不能输入内容
代码:
<el-table-column
prop="moneyNum"
label="奖励金额"
>
<template>
<div>
<el-input
v-model="inputNum"
class="moneyInput"
placeholder="请输入金额"
>
<i slot="suffix" style="font-style: normal; margin-right: 8px; color: #000;">
元
</i>
</el-input>
</div>
</template>
</el-table-column>
data() {
return {
inputNum: ''
}
}
这样写样式是绝对没问题的,但是输入框却不能用。
原因是表单没有绑定表格列要渲染的内容。例如:我的奖励金额这一列绑定的属性名称是moneyNum,那么输入框的v-model要绑定scope.row.moneyNum。
正确代码:
<el-table-column
prop="moneyNum"
label="奖励金额"
>
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.moneyNum"
class="moneyInput"
placeholder="请输入金额"
>
<i slot="suffix" style="font-style: normal; margin-right: 8px; color: #000;">
元
</i>
</el-input>
</div>
</template>
</el-table-column>