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

优化前端UI：动态控制按钮显示

最新推荐文章于 2023-05-20 14:11:02 发布

原创最新推荐文章于 2023-05-20 14:11:02 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#render #iview

iview脱坑指南专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在前端界面中根据服务状态动态控制按钮显示的方法，通过使用Vue框架中的条件渲染特性，实现“关闭服务”按钮仅在服务进行中时可见，提升用户体验。

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

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

代码：

{
    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);
                    }
                }
            }, '关闭服务')
        ])
    }