vue2 iview switch 使用render渲染,before-change阻断前传参数
由于iview switch组件的before-change不能直接传参数,所以通过一种变通的方法来传参,此方法对于开关前触发弹窗定制化提示非常有用

打印测试:

示例代码:
<template>
<Table :columns="columns1" :data="data1"></Table>
</template>
<script>
// 全局this
var thatValue;
export default {
data () {
return {
switchOneInfo:{},
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: '开关',
key: 'is_show',
render:function(h,params){
return h('i-switch',{
props:{
value:params.row.is_show,
beforeChange:thatValue.handleBeforeChange // 阻断属性
},
on:{
"on-change":(value)=>{ // 状态更新
console.log('on-change:',value)
}
},
nativeOn:{
"mousedown":()=>{ // 监听组件原生事件mousedown,此事件在click之前触发
thatValue.switchOneInfo = {
name:params.row.name,
is_show:params.row.is_show
}
},
}
});
}
},
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
is_show: false
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01',
is_show: true
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
is_show: false
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04',
is_show: true
}
]
}
},
created() {
thatValue = this
},
methods:{
handleBeforeChange () {
console.log("handleBeforeChange:",this.switchOneInfo)
return new Promise((resolve) => {
this.$Modal.confirm({
title: '切换确认',
content: '您确认要切换开关状态吗?',
onOk: () => {
resolve();
}
});
});
}
}
}
</script>

浙公网安备 33010602011771号