iview根据不同的条件显示不同的按钮

子轩.y

于 2023-03-14 14:03:35 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/yangshanghao/article/details/129526030

这段代码展示了如何在表格中根据用户的状态（userinfo_status）动态渲染按钮，当状态为1时显示‘解冻’按钮，背景色为蓝色；否则显示‘冻结’按钮，背景色为红色。点击按钮会触发frozen方法，传入用户ID和索引值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看结果：

需求：

根据用户状态判断显示按钮是冻结还是解冻。

实现代码：

 {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            if(params.row.userinfo_status==1){
                                var text = '解冻';
                                var style={
                                    background:'#2d8cf0',
                                    border:'1px solid #2d8cf0'
                                }
                            }else{
                                text = '冻结';
                                style={
                                    background:'#ed4014',
                                    border:'1px solid #ed4014'
                                }
                            }
                            return h('div', [
                                h('Button',
                                {

                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: style,
                                    on: {
                                        click: () => {
                                            this.frozen(params.row.userinfo_id,params.index)
                                        }
                                    }
                                }, text)
                            ]);
                        }
                    }