vue+iview框架,table表格中的操作按钮为disabled状态时,当用户点击时给出提示
在table的操作一列中有的按钮为禁用状态,但要求用户在点击的时候,给出提示(是不是觉得有些自相矛盾,自己体会~~)在按钮上还有一个“禁止操作的图标”,即disabled,大家都懂得上代码:<Table ref="table" disabled-hover border :data="tableList" :columns="columns" type='selectio...
·
在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组件实现点击提示的功能。
所以有时候,换一种思路,功能实现起来可能更简便,不是吗~~哈哈哈!!!
更多推荐
已为社区贡献1条内容
所有评论(0)