一、Iview Table 組件 多選框選中和禁選設置

Table添加多選框

通過給 columns 數據設置一項，指定  type: 'selection' ，即可自動開啟多選功能。

正確使用好以下事件，可以達到需要的效果：

<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) {　　　　　　　　　　console.log(data[i].name)　　　　　　　　}　　　　　　}</script>

給 data 項設置特殊 key _checked: true 可以默認選中當前項。

給 data 項設置特殊 key _disabled: true 可以禁止選擇當前項。

例如：

for (var i = 0; i < res.data.list.length; i++) { if (res.data.list[i].status === '1') {  res.data.list[i]._disabled = true // 設置復選框禁用  res.data.list[i]._checked= true // 設置復選框選中狀態 }}

二、Iview Table 組件中點擊Icon彈出Poptip的寫法

1.圖標禁用方式

{ title: '撤銷', key: 'operate', width: 70, fixed: 'right', render: (h, params) => {  if (params.row.status === '1') { // 選中當前行信息   return h('div', [    h('div', [     h('Poptip', {      props: {       confirm: true,       title: '確定要撤銷嗎！'      },      on: {       'on-ok': () => {        this.cancelFunction(params.index)       }      }     }, [      h('Button', {       props: {        shape: 'circle',        icon: 'md-return-left'       }      })     ])    ])   ])  } else {   return h('div', [    h('Button', {     props: {      shape: 'circle',      icon: 'md-return-left',      disabled: true // 禁用圖標     }    })   ])  } }},

2.圖標禁用方式

{ title: '修改', key: 'operate', fixed: 'right', width: 70, textAlign: 'right', render: (h, params) => {  return h('div', [   h('Button', {    props: {     shape: 'circle',     icon: 'ios-paper-plane',     disabled: params.row.status !== '0'    },    on: {     click: () => {      this.editFunction(params.index)     }    }   })  ]) }},

三、四元運算符 : 多個三元運算符 嵌套