Use of various component extensions in Iview Table components

1. Iview Table component Multiple selection box selection and disable settings

Table adds multiple check boxes

By setting an item for the columns data and specifying type: 'selection', the multi-select function can be automatically enabled.

Use the following events correctly to achieve the desired effect:

@on-select , select an item to trigger, the return values are selection and row , respectively the option and the item just selected.
@on-select-all , triggered when clicking Select All, the return value is selection, and the option is already selected.
@on-selection-change , it will be triggered as long as the selected item changes, the return value is selected, and the option is already selected.

<template>
 <div>
  <Table ref="selection" :columns="columns" :data="data" @on-selection-change="selectChange"></Table>
 </div>
</template>

<script>
export default {
data () {
  return {
columns: [ { type: 'selection', width: 60, align: 'center' }, { title: 'Name', key: 'name' }]
}
},
methods: {
selectChange: function (data) {
(data[i].name)
}
}

</script>

Set a special key for the data item _checked: true The current item can be selected by default.

Setting a special key _disabled: true for data items can prevent the selection of the current item.

For example:

for (var i = 0; i &lt; ; i++) {
 if ([i].status === '1') {
  [i]._disabled = true // Set check box disabled  [i]._checked= true // Set check box to select status }
}

2. How to write Poptip when clicking Icon in the Iview Table component

1. Icon disable method

{
 title: 'Revoke',
 key: 'operate',
 width: 70,
 fixed: 'right',
 render: (h, params) =&gt; {
  if ( === '1') { // Select the current line information   return h('div', [
    h('div', [
     h('Poptip', {
      props: {
       confirm: true,
       title: 'Are you sure you want to cancel it!  '
      },
      on: {
       'on-ok': () =&gt; {
        ()
       }
      }
     }, [
      h('Button', {
       props: {
        shape: 'circle',
        icon: 'md-return-left'
       }
      })
     ])
    ])
   ])
  } else {
   return h('div', [
    h('Button', {
     props: {
      shape: 'circle',
      icon: 'md-return-left',
      disabled: true // Disable icon     }
    })
   ])
  }
 }
},

2. Icon disable method

{
 title: 'Revise',
 key: 'operate',
 fixed: 'right',
 width: 70,
 textAlign: 'right',
 render: (h, params) =&gt; {
  return h('div', [
   h('Button', {
    props: {
     shape: 'circle',
     icon: 'ios-paper-plane',
     disabled:  !== '0'
    },
    on: {
     click: () =&gt; {
      ()
     }
    }
   })
  ])
 }
},

Three and four operators: multiple three operators nested

var state = null;

var display_state = (state == null ? "Unuse" : (state == true ? "Using" : "Disable"))

//display_state
//"Unuse"

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.