在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组件实现点击提示的功能。

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

Logo

前往低代码交流专区

更多推荐