在开发中使用iView这个框架的过程中遇到了几个问题:
1.switch绑定字段的值不是true, false,使用的是1,2代表激活或者开启在表格中的处理
<template slot="baseCommodityState" slot-scope="{ row }">
<i-switch size="large" :value="row.baseCommodityState == 1 ? true : false"
v-if="row.baseCommodityState"
:before-change="handleChange.bind(this,row)">
<span slot="open">上架</span>
<span slot="close">下架</span>
</i-switch>
</template>
2.在表单中处理switch的状态
<FormItem label="上架状态: " prop="baseCommodityState">
<i-switch v-model="formData.baseCommodityState" :true-value="1" :false-value="2" />
</FormItem>
3.在表格中修改本行switch的状态,要求在改变状态以前调一下接口看看是否可以状态的改变,这时候使用on-change方法就会出现问题,change的时候方法就会直接改变状态,所以要使用before-change这个方法.在before-change的时候是拿不到行内的数据的, 通过element plus el-switch 的before-change 如何带参数-pudn.com找到了解决办法
/**
* html
*/
<template slot="baseCommodityState" slot-scope="{ row }">
<i-switch size="large" :value="row.baseCommodityState == 1 ? true : false"
v-if="row.baseCommodityState"
:before-change="handleChange.bind(this,row)">
<span slot="open">上架</span>
<span slot="close">下架</span>
</i-switch>
</template>
/**
* js
* 上架下架
* @param data
* i-switch 开启 or 关闭 返回返回promise对象时则可以切换switch的状态,若什么都不返回则不可切换switch状态
*/
handleChange(data) {
return new Promise(async () => {
const res = await standUpAndDown({ // 调用接口
baseCommodityState: data.baseCommodityState == 1 ? 2 : 1,
id: data.id
})
if (res.errCode == '40007' && !res.success) {
this.$Modal.warning({
title: '下架提示',
content: res.errDesc
})
} else if (!res.success) {
this.$Message.error(res.errDesc)
} else {
this.$Message.success('操作成功')
}
// 重新调用查询数据的接口
this.getData()
})
},
