iview 的InputNumber数值组件,tabs组件高度

表单验证

password: [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {validator: validateNewPwd, trigger: 'blur'}
],

tabs高度问题:确定动画就可以高度根据内容自适应了

**tabs内嵌table 想要达到宽度自适应需要


    v-if="tabName==='name1'">组件里面有table组件
    
    
    
//购物车动态生成InputNumber
render: (h, params) => {
    return h('InputNumber', {
        props: {
            value: params.row.num,
            min: 1
        },
        on: {
            'on-change': e => {
                params.row.num = e;//数值
                params.row.total = params.row.num * params.row.unitPrice;//总价
                this.inputNumberChange(params);
            }
        },
        width: '80px',
    })
}

//当对InputNumber进行增减时会导致iview table的复选框选中状态丢失

1:需要给data数组里增加_checked,

_.forEach(this.list.data, (item) => {
    item['total'] = item.unitPrice * item.num;
    item._checked = false;
})

官网说法:

通过给 columns 数据设置一项,指定 type: 'selection',即可自动开启多选功能。

给 data 项设置特殊 key _checked: true 可以默认选中当前项。

给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

2:iview 的table 的@on-selection-change="handleSelect"

handleSelect(v) {
    this.totalMoney = 0;
    this.list.select = v.length;
    this.list.selectList = v;//选中的商品列表

  this.delTotalMoney();//计算选中商品总金额
    _.forEach(this.list.data, (t) => {
        t._checked = false;
        _.forEach(this.list.selectList, (item) => {
            if (item.uid === t.uid) {
                t._checked = true;//选中的商品
            }
        })
    })
},

你可能感兴趣的:(js,iview)