天天看點

iview switch render渲染

iview table render渲染開關

效果圖和關鍵代碼如下:

iview switch render渲染
{                                                     
  title: '查詢權限',                                  
  key: 'qryflag',                                     
  align: 'center',                                    
  render: (h, params) => h('ui-switch', {             
    props: {                                          
      value: params.row.qryflag,                      
      'true-value': '1',                              
      'false-value': '0'                              
    },                                                
    on: {                                             
      'on-change': (value) => {                       
        params.row.qryflag = value;                   
        console.log('qryFlag:' + params.row.qryflag); 
      }                                               
    }                                                 
  })                                                  
},                                                    
{                                                     
  title: '操作權限',                                  
  key: 'operflag',                                    
  align: 'center',                                    
  render: (h, params) => h('ui-switch', {             
    props: {                                          
      value: params.row.operflag,                     
      'true-value': '1',                              
      'false-value': '0'                              
    },                                                
    on: {                                             
      'on-change': (value) => {                       
        params.row.operflag = value;                  
      }                                               
    }                                                 
  }, [                                                
    h('span', {                                       
      slot: 'open',                                   
      domProps: {                                     
        innerHTML: '開'                               
      }                                               
    }),                                               
    h('span', {                                       
      slot: 'close',                                  
      domProps: {                                     
        innerHTML: '關'                               
      }                                               
    })                                                
  ])                                                  
}