el-input-number 在el-table中使用
时间: 2023-10-27 12:51:30 浏览: 169
element input-number 默认值设置为空
当你想在 el-table 中使用 el-input-number 组件时,你可以将其放置在 el-table-column 的 slot-scope 中。以下是一个示例:
```html
el-table :data="tableData">
el-table-column prop="quantity" label="数量 <template slot-scope="scope">
<el-input-number v-model="scope.row.quantity"></el-input-number>
</template>
</el-table-column>
</el-table>
```
在上述示例中,我们创建了一个 el-table 组件,并将数据传递给它的 data 属性。然后,我们使用 el-table-column 组件来定义表格列,并使用 prop 属性指定数据对象中的字段。在 slot-scope 中,我们可以通过 scope 对象访问到当前行的数据。我们将 el-input-number 放置在这个作用域下,并通过 v-model 绑定数据。
这样,el-input-number 组件就可以在 el-table 中使用了,并且可以通过 v-model 实现与表格数据的双向绑定。
阅读全文