columns: [ { title: '规格', width: 600, align: 'center', key: 'goodsSpecs' }, { title: '库存', width: 200, align: 'center', key: 'stack', render: (h,params) => { return h('i-input',{ props: { value: params.row.stack }, on: { input: event => { params.row.stack = event.target.value; } } }); } }, { title: '价格', width: 200, align: 'center', key: 'price', render: (h,params) => { return h('div',{ style: { display: 'flex' } },[ h('i-input',{ props: { value: params.row.price }, on: { input: event => { vm.specs[params].price = params.row.price; } } }),h('span','元') ] ); } } ],i-table如何把输入的price绑定给specs的price
时间: 2024-02-10 21:13:11 浏览: 69
在i-table中,要把输入的price绑定给specs的price,可以在输入框的input事件中修改对应的specs对象的price属性。具体实现可以参考以下代码:
```html
<template>
<Table :columns="columns" :data="data"></Table>
</template>
<script>
export default {
data() {
return {
data: [
{ goodsSpecs: '规格1', stack: 10, price: 20 },
{ goodsSpecs: '规格2', stack: 20, price: 30 },
{ goodsSpecs: '规格3', stack: 30, price: 40 }
],
columns: [
{
title: '规格',
width: 600,
align: 'center',
key: 'goodsSpecs'
},
{
title: '库存',
width: 200,
align: 'center',
key: 'stack',
render: (h, params) => {
return h('i-input', {
props: {
value: params.row.stack
},
on: {
input: event => {
params.row.stack = event.target.value;
}
}
});
}
},
{
title: '价格',
width: 200,
align: 'center',
key: 'price',
render: (h, params) => {
return h('div', { style: { display: 'flex' } }, [
h('i-input', {
props: {
value: params.row.price
},
on: {
input: event => {
// 在input事件中修改对应的specs对象的price属性
this.data[params.index].price = event.target.value;
}
}
}),
h('span', '元')
]);
}
}
]
}
}
}
</script>
```
在这个示例中,我们在i-table中定义了一个data数组,其中每个元素代表表格中的一行数据。然后在模板中使用Table组件来定义表格的结构和样式,并通过`:data`属性将数据源绑定到表格上。接着使用Column子组件来定义表格的列,其中第三列的`render`函数返回一个包含一个输入框和一个“元”的div元素。在输入框的`input`事件中,我们修改对应的specs对象的price属性,即可实现输入的price绑定给specs的price的功能。需要注意的是,为了在input事件中访问到当前行和列的信息,我们使用了`params`参数。另外,为了在input事件中访问到this.data数组,我们使用了箭头函数来避免this指向的问题。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)