zb-table 动态显示操作按钮


在uni-app开发时遇到一个需求,需要用表格显示内容,有一列操作列要求根据某列内容显示对应操作

例子:有完成时间的行操作列不能显示【删除】、【完成】按钮

在 DCLOUD 插件市场下载安装 zb-table 插件,查看文档,没找到可以动态显示操作列按钮的示例,于是研究源代码,发现操作列的渲染由一个 permission 函数执行

permission(item, renders, index) {
    if (this.permissionBtn && typeof this.permissionBtn === 'function') {
        return this.permissionBtn(item, renders, index)
    }
    return renders
}

其中 permissionBtn 是一个 props,是一个返回要渲染的操作按钮数组的函数,用法如下

// 父组件(省略了一些代码)
<zb-table :columns="columns" :permissionBtn="permissionFun" @complete="completeFun" @delete="deleteFun" ... ></zb-table>

columns:[
    ...
    {
        type: 'operation',
        label: '操作',
        align: 'center',
        fixed: true,
        width: 150,
        renders: [{
            name: '完成',
            type: 'primary',
            func: "complete"
        }, {
            name: '删除',
            type: 'warn',
            func: "delete",
        }]
    }
]

permissionFun( row, renders, index ) {
    if (没有完成时间) {// 根据上面例子的判断条件,返回两个按钮
        return [renders[0], renders[1]]
    }
}


文章作者: April-cl
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 April-cl !
  目录