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>