iview table里的render數據格式

  **基本操作**

 {
 title:'操作',
 align: 'center',
 width:120, 
render:(h,params)=>{
  return h('div',[
      h('span', {
          style:{
              'margin-right':'10px',
              'color':'#2d8cf0',
              'cursor':'pointer'
          },
          on: {
              click: () => {
                  this.edit(params.row.id)
              }
          }
      },'編輯'),
      h('span', {
          style:{
              'color':'#2d8cf0',
              'cursor':'pointer'
          },
          on: {
              click: () => {
                  this.delete(params.row.id,params.row.accountName)
              }
          }
      },'刪除')
  ])
 }

**Button**

 {
 title: '操作',
 align: 'center',
 render:(h,params)=>{
     return h('div',[
         h('Button', {
                props: { 
                       type: 'primary',            
                    },             
                style:{ 
  				  'margin-right':'5px'
             		},
             on: {
                 click: () => {
                     this.edit(params.row.id)
                 }
             }
         },'編輯'),
         h('Button', {
             props: {
                 type: 'primary',
             },
             on: {
                 click: () => {
                     this.delete(params.row.id)
                 }
             }
         },'刪除')
     ])
 }
 }

**switch**

 {
  title: '狀態',
  width:60,
  align: 'center',
  render:(h,params)=>{
      return h('div',[
          h('i-switch', {
              props: {
                  type: 'primary',
                  value: true  //控制開關的打開或關閉狀態，官網文檔屬性是value
              },
              style: {
                  //display: params.index !== 0 ? 'none' : 'inline'
              },
              on: {
                  'on-change': (value) => {//觸發事件是on-change,用雙引號括起來，
                  //參數value是回調值，並沒有使用到
                      this.switch(params.index) //params.index是拿到table的行序列，可以取到對應的表格值
                  }
              }
          })
      ])
  }
 }

**checkbox**

 {
 title: '是否啟用',
 align: 'center',
 width:200,
 key:'flag',
 render:(h,params)=>{
    const row = params.row;
    const flagVal = row.flag
    return h('div',[
        h('Checkbox', {
            props: {
                value: flagVal ,
            },
            on:{
                'on-change': () =>{
                    alert(1);
                }
            }
        })
    ])
 }
 },

 對數據進行操作

**select**

 render: (h, params) => {
 return h('Select', {
    props:{
        value: this.data[params.index].volumeType,
    },
    on: {
        'on-change':(event) => {
            this.data[params.index].volumeType = event;
        }
    },
 },
 [
    h('Option',{
        props: {
            value: '1'
        }
    },'option1'),
    h('Option',{
        props: {
            value: '2'     
             }
    },'option2')
 ]
 );
 },

 實現動態改變**option**的內容，與組件的data結合

 直接上代碼，在數組的地方寫入：

 this.volumeTypes.map(function(type){
 return h('Option', {
    props: {value: type}
 }, type);
 })

其中，this.volumeTypes就是我們的列數據，當然，這是最基本的綁定的寫法，如果想使用對象數組，自行研究，很easy的~

 這是我們的最終結果：

 {
 title: '卷類型',
 key: 'volumeType',
 align: 'center',
 render: (h, params) => {
    return h('Select', {
        props:{
            value: this.data[params.index].volumeType,
        },
        on: {
            'on-change':(value) => {
                this.data[params.index].volumeType = value;
            }
        },
    },
    this.volumeTypes.map(function(type){
        return h('Option', {>            props: {value: type}
        }, type);
    })
    );
 },
 },  

 {
     title: '服務項目',
     align: 'center',
     key: 'categoryId',
     render: (h, params) => {
       let row = params.row
       let optionArr = []
       row.allType.forEach(item => {
         optionArr.push(h('Option',{
           props: {
             value: item.categoryId
           }
         }, item.categoryName))
       })
       return h('Select', {
           props:{
             value: row.categoryId,
           },
           on: {
               'on-change':(event) => {
                 row.categoryId = event
               }
           },
       }, optionArr)
     }
   }

 **slot**
 toolTip里的卡槽slot,應放到props同級
 props: {},
 slot: ‘’

 h('Tooltip',{
     props: {
 		placement:'bottom',
 		content:'tishi'
 	},
 	},[h('Icon',{
     props:{
       type:'ios-information'
     },
     class:'font-red'
   }),
 		h('div',{
 			slot: 'content'
 		},[
 				h('p', {class:'tc'}, '提示：'),
				h('p', '系統內置角色不允許刪除')
 			]
 		) 	
 		]	
 );

 **日期**

 {
 title: '夜間服務開始時間',
 key: 'darkStartTime',
 align: 'center',
 render: (h, params) => {
   return h('div', [
     h('DatePicker', {
       props: {
         type: 'datetime',
         format: 'yyyy-MM-dd HH:mm:ss',
         placeholder: '選擇夜間服務開始時間',
         transfer: true,
         value: params.row.darkStartTime
       },
       options: {
         disabledDate: (date) => {
           if (params.row.darkStartTime) {
               return date && date.valueOf() > new Date(params.row.darkStartTime).valueOf()
           };
            if (!params.row.darkStartTime) {
               return false
           }
         }
       },
       on: {
         'on-change': e => {
           if (e) {
             params.row.darkStartTime = e;
           } else {
             params.row.planDateFrom = '';   // 必須有各種判斷，否則清空時無法解除之前的禁用
           }
         }
       }
     })
   ])
 }
 }

 **TimePicker**

 {
     title: '夜間服務結束時間',
     key: 'darkEndTime',
     align: 'center',
     render: (h, params) => {
       return h('div', [
         h('TimePicker', {
           props: {
             format: 'HH:mm',
             placeholder: '選擇夜間服務開始時間',
             transfer: true,
             value: params.row.darkEndTime
           },
           on: {
             'on-change': e => {
               if (e) {
                 params.row.darkEndTime = e;
               } else {
                 params.row.darkEndTime = '';   // 必須有各種判斷，否則清空時無法解除之前的禁用
               }
             }
           }
         })
       ])
     }
   }

 **inputNumber**

 {
 title: '退貨數量',
 key: 'curQuantity',
 align: 'center',
 render: (h, params) => {
   let child = h('InputNumber', {
     props: {
       min: 1,
       max: params.row.maxQuantity,
       value: params.row.curQuantity,
       'active-change': false
     },
     on: {
       'on-change': (value) => {
         params.row.curQuantity = value
         bus.$emit("onChangeQuan", {row: params.row, index: params.index})
       }
     }
   })
   if (params.index == 0) {
     return h('div', [child])
  } else {
     return h('div', params.row.maxQuantity)
   }
 }
 }
 mounted() {
 this.$bus.$on("onChangeQuan",({row, index}) => this.onChangeQuan(row, index));
 },
 onChangeQuan(row, index) {
 this.list.data[index] = row;
 },

 **input**

 h("Input", { 
 	props: {
 	value: params.row.money,
 	type: "number"
 	},
 on: {
 		"on-change"(event) {
   	params.row.money = event.target.value; // 這里對input的數據雙向綁定
 	},
 	"on-enter": () => {
   	console.log('回車事件');
   	}
 }
 }
 })

 **a標簽**

 *render: (h, params) => {*
 *//return h(‘定義的元素‘,{‘元素的性質‘},‘元素的內容‘);*

  *let url = ‘訪問的地址‘*
       return h(‘a‘, {*
             attrs: {*
                           href: url,*
                           target: ‘_black‘*
                        }*
             }, params.row.address)；*
 *}