vue+iview框架，table表格中的操作按钮为disabled状态时，当用户点击时给出提示

在table的操作一列中有的按钮为禁用状态，但要求用户在点击的时候，给出提示（是不是觉得有些自相矛盾，自己体会~~）

在按钮上还有一个“禁止操作的图标”，即disabled，大家都懂得

上代码：

<Table ref="table" disabled-hover border :data="tableList" :columns="columns"  type='selection'></Table>

columns: [
        {title: '公司名称', key: 'companyName'},
        {title: '上传数量', key: 'totalCount'},
        {title: '违规数量', key: 'illegalCount'},
        {
          title: '处理状态',
          key: 'state',
          render: (h, params) => {
              return h('div', this.stateFilter(params.row.state))
          }
        },
        {
          title: '上传日期',
          key: 'uploadTime',
          render: (h, params) => {
              return h('div', this.timeFormatted(params.row.uploadTime))
          }
        },
        {
          title: '操作',
           key: 'action',
           render: (h, params) => {
             if(params.row.state !== 5) {
               return h('Poptip', {
                 props: {
                   title: '',
                   content: '数据尚未分析完成'
                 }
               },
               [h('div',{
                 style: 'cursor: not-allowed; color: #fff; background: #888; padding: 2px 7px;border-radius: 3px; font-size: 12px;'
               }, '下载')])
             } else {
               return h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.download(params.row.batchNum, params.row.companyName)
                  }
                }
              }, '下载')
            }
           }
        },
      ],

其实原理很简单：

因为button为disabled状态时是禁止点击的，因此我没有采用button，而是使用div来代替，然后通过css伪装成disabled状态的button，然后在点击的时候通过iview的Poptip组件实现点击提示的功能。

所以有时候，换一种思路，功能实现起来可能更简便，不是吗~~哈哈哈！！！