iview-Table table render rendering

1 . No.
 2 .if determination, a label
 . 3 .if determination, Input input
 . 4 .renderHeader custom column headers click event, render the Input click event (nativeOn the Click)
 . 5 . Regular column
 6 . Button the Button
 . 7 . Checkbox CheckBox
 8. The drop-down box select (traversal list generation option) 
9. drop-down box select (enumeration generation option)

 

that = const the this 
the this .Columns = [ 
  {   // 1. Reference 
    type: 'index' , 
    title: 'number' , 
    width: 50 , 
    align = left: 'Center' 
  }, 
  {   // almost continuousl determination, a label 
    title: 'operation' , 
    Key: 'Action' , 
    align = left: 'Center' , 
    Fixed: 'left' , 
    width: 80 , 
    the render: (H, the params) => {
       IF ( the this.dataList [params.index] .isRptEdit == '. 1' ) {
         // the key and the entry part of the non-reporting deselect 
        return H ( 'span', '/' ); 
      } the else {
         return H ( 'div' , [ 
          H ( 'A' , { 
            style: { 
              Color: 'Blue' 
            }, 
            ON: { 
              the Click: () => {
                 the this .unsel (the params); 
              } 
            } 
          }, 'deselect' ) 
        ]) 
      } 
    } 
  } ,
  {  // 3.If determination, Input Input 
    title: 'item name' , 
    Key: 'itemName' , 
    width: '200 is' , 
    the render: (H, the params) => {
       IF ( the this .dataList [params.index] .isRptEdit == '1' ) {
         // non-editable report entry link 
        return H ( 'span' , { 
          style: { 
            Color: '# c5c8ce' 
          } 
        }, params.row.itemname); 
      } the else {
         return H ( ' INPUT ' , { 
          The props: { 
            type:'text' , 
            size: 'Small' , 
            value: the this .dataList [params.index] .itemname 
          }, 
          ON: {
             'ON-Blur': (Event) => { 
              that.dataList [params.index] .itemname = event.target.value; 
            } 
          } 
        }, '' ) 
      } 
    } 
  }, 
  {   // 4.renderHeader custom column headers click event, render the Input click event (the click nativeOn) 
    title: 'report entry personnel' , 
    Key: 'rpteditor' , 
    width: '150' ,
    renderHeader: (H, the params) => {
       return H ( 'div' , [ 
        H ( 'A' , { 
          style: { 
            Color: 'Blue' 
          }, 
          ON: { 
            the Click: () => { // custom column head click event 
              the this .editMode = 'BATCH' ;
               the this .personKey = 'rpteditor'
               the this .showSelPerson = to true ; 
            } 
          } 
        }, params.column.title) 
      ]) 
    }, 
    the render: (H, the params) => {
        const row = params.row;
        return h('Input', {
          props: {
            type: 'text',
            size : 'small',
            readonly: true,
            value: this.dataList[params.index].rpteditor
          },
          nativeOn: {
            click: () => {
              this.editMode = 'one';
              this.currentRowId = params.index;
              this.personKey = 'rpteditor'
              this= .showSelPerson to true ; 
            } 
          } 
        }, '' ); 
    } 
  }, 
  {   // 5. The regular column 
    title: 'Current treatment of human' , 
    Key: 'currentHandler' , 
    width: '120' 
  }, 
  {   // 6. The button the Button 
    title: 'operation' , 
    Key: 'Action' , 
    align = left: 'Center' , 
    width: 155 , 
    the render: (H, the params) => {
       return H ( 'div' ,[
        h('Button', {
          props: {
            size: 'small'
          },
          style: {
            marginRight: '5px',
            fontSize: '12px',
            borderColor: '#5cadff'
          },
          on: {
            click: () => {
              this.upRow(params)
            }
          }
        }, '上移'),
        h('Button', {
          props: {
            size: 'small'
          },
          style: {
            marginRight: '5px',
            fontSize: '12px',
            borderColor: '#5cadff'
          },
          on: {
            click: () => {
              this.downRow(params)
            }
          }
        }, '下移'),
        h('Button', {
          props: {
            size: 'small'
          },
          style: {
            marginRight: '5px',
            fontSize: '12px', 
            The borderColor: '# 5cadff' 
          }, 
          ON: { 
            the Click: () => {
               the this .delRow (the params) 
            } 
          } 
        }, 'delete' ) 
      ]) 
    } 
  }, 
  {   // 7. box Checkbox 
    title: ' primary item ' , 
    Key: ' MUST ' , 
    width: ' 50 ' , 
    align = left: ' Center ' , 
    the render: (H, the params) => {
       return H (' Checkbox ' , {
        The props: { 
          size: 'Small' , 
          value: the this .dataList [params.index] .must 
        }, 
        ON: {
           'ON-Change': (E) => {
             the this .dataList [params.index] .must = E 
          } 
        } 
      } '' ) 
    } 
  }, 
  { // 8. The drop-down box select (traversal list generation option) 
    title: 'document item name' , 
    Key: 'itemName' , 
    width: '200 is' , 
    the render: (H, the params) => {
       returnH ( 'the Select' , { 
        The props: { 
          value: the this .dataList [params.index] .itemname, // value acquiring a selected drop-down box 
          size: 'Small' 
        }, 
        ON: {
           'ON-Change': E = > {
             the this .dataList [params.index] .itemname = E // change the drop-down box assignment 
          } 
        } 
      }, the this .productTypeList.map ((Item) => { // this.productTypeList the drop-down box Data 
        return H ( ' Option-', { // dropdown value 
          the props: { 
            value: item.id, 
            label: item.name, for
          } 
        }) 
      })) 
    } 
  }, 
  { // 9. A drop-down box Select (enumeration generation option) 
    title: 'document item name' , 
    Key: 'itemName' , 
    width: '200 is' , 
    the render: (H, the params ) => {
       return H ( 'the select' , { 
        the props: { 
          value: the this .dataList [params.index] .itemname, // Get the value of the drop-down box to select 
          size: 'Small' 
        }, 
        ON: {
           'ON- Change ': E => {
             the this .dataList [params.index].itemname = e // change the drop-down box assignment 
          } 
        } 
      }, 
      [  
        H ( 'Option-', { 
          The props: { 
               value: '. 1' 
          } 
        }, 'the Option1' ), 
        H ( 'Option-' , { 
            The props: { 
                value: '2' 
             } 
        }, 'option2' ) 
      ]) 
    } 
  } 
]