【iview脱坑指南】利用table组件的render函数控制是否显示该行的操作

效果图:已结束服务的不再显示“关闭服务”按钮

【iview脱坑指南】利用table组件的render函数控制是否显示该行的操作

 

------------------------------------------------------------------------

代码:

{
    title: '操作',
    key: 'action',
    align: 'center',
    render: (h, params) => {
        return h('div', [
             h('Button', {
                props: {
                    type: 'warning',
                    size: 'small'
                },
                style: {
                    display : params.row.serviceState === '已结束' ? "none" : "inline-block",
                },
                on: {
                    click: () => {
                        //弹窗确认关闭服务
                        this.showCloseWarning = true;
                        //设置当前数据行
                        this.setRowIndex(params.index);
                    }
                }
            }, '关闭服务')
        ])
    }