在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]]
}
}