1. 程式人生 > >iview table裡的render的一些資料格式

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);
                    }
                }
            })
        ])
    }
},

對資料進行操作 在這裡插入圖片描述