iview中table中添加select下拉框的一些问题

使用场景:一个表格中,可能有两行以上,但每行的东西都一样,比如我这个表格中,每行的第一列都是一个下拉框,这时候绑定数据的时候就有点费劲了,你要是v-model一个固定的值,那么在你选择第一行的时候,第二行也会是你选择的那个,为了解决这个问题,也是找了不少资料,不过大部分是render函数写的,iview其实现在用slot的方式也可以解决

<i-table :columns="detailColumns" :data="detailDatas">
<template slot-scope="{ row, index }" slot="receiveNm" >
    <Select v-model="detailDatas[index].receiveNm">
        <Option value="01">微民保险</Option>
        <Option value="02">上海镁信</Option>
    </Select>
</template>
</i-table>
detailDatas:[
    {receiveNm: ''}
]

还有一个问题,当你想在下拉数据变化时做操作(on-change),它的默认值是value,就是当前选中的值,但是你还想多传几个参数,比如row,index,那么就可以用以下方法传

<Select @on-change="selectChange($event, row, index)" v-model="detailDatas[index].receiveNm">
    <Option value="01">微民保险</Option>
    <Option value="02">上海镁信</Option>
</Select>

methods中
selectChange(event, row, index){
    //event就是默认的值
}

所有的组件都可以用这种方法传参
第三个问题是,在表格中,尤其是多行的表格有下拉框时,下拉项会被隐藏,这时不用设置别的,只需要加一个transfer属性即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值