element的el-input出现无法输入的bug
在 某位传说级大佬 的指点下, 解决了该 bug
问题 :
在 el-table 中使用了 el-input , el-table 外层还嵌套了多层 el- 组件
原因 :
嵌套的 el- 组件太多
解决 :
1. 在 el-table 的 el-table-column 中, 使用 template slot-scope="scope" 插槽, 再将 el-input 放入其中
2. 将 el-input 绑定的数据, 存放在 el-table 的 :data 数据中
<el-tabs
:tab-position="tabPosition"
style="height: 200px;"
type="card"
v-model="activeName"
>
<el-tab-pane
:label="item.label"
:name="item.name"
v-for="(item, index) in sizeList"
:key="index"
>
<el-table
ref="singleTable"
:data="tableData"
style="width: 100%"
border
header-align="center"
>
<el-table-column
width="150"
align="center"
header-align="center"
label="价格"
property="priceType"
>
</el-table-column>
<el-table-column
label="个 (最小位置)"
align="center"
header-align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.inputPrice01"
size="mini"
placeholder="请输入价格"
clearable
@input="refreshInput($event)"
></el-input>
</template>
</el-table-column>
......
// 列表数据
tableData: [
{
priceType: "销售价",
date: "2016-05-02",
name: "一级分类 / 二级规格 / 三级规格",
inputPrice01: "1",
inputPrice02: "2",
inputPrice03: "3"
},
{
priceType: "市场价",
date: "2016-05-04",
name: "一级分类 / 二级规格 / 三级规格",
inputPrice01: "1",
inputPrice02: "2",
inputPrice03: "3"
}
],