web开发中如何根据字段结果渲染不同按钮

这篇文章主要介绍web开发中如何根据字段结果渲染不同按钮，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出溧水免费做网站回馈大家。

1.根据数据的某个字段更新按钮的数据

    
        
        
        
        
        
        
        
        
        
            
                {{ scope.row.is_monitored ? "移除监控":"加入监控" }}
                查看性能
                查看状态
            
        
    
    

如果scopy.row.is_monitored的值为"true",则el-button的type属性为primary，否则则为success

如果scopy.row.is_monitored的值为"true",则el-button的值为移除监控，否则值为加入监控

可选的js代码

const tmpText = row.is_monitored ? "主机移除监控队列, 是否继续?" : "主机加入监控队列, 是否继续?";

this.$confirm(tmpText, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(() => {
    axios.post(site_url + "host_view/", {"host_id": row.host_id,"is_monitored": row.is_monitored}).then(res => {
        if (res.data.result) {
            if(row.is_monitored){
                this.$message.success('主机移除监控队列成功');
            } else {
                this.$message.warning('主机加入监控队列成功');
            }
            this.getSearch();
        } else {
            this.$message.error('更新主机监控状态失败');
        }
    }, 'json');
}).catch(() => {
    this.$message({type: 'info', message: '已取消更新'});
});

2.根据字段不同，给el-button赋于不同的type属性

    
        
        
        
        
        
        
            
                确认完成
            
        
    

如果scopy.row.status的值为"已完成",则el-button的type属性为空，否则则为primary

如果scopy.row.status的值为"已完成",则为el-button绑定disabled属性，否则不绑定disabled属性

以上是“web开发中如何根据字段结果渲染不同按钮”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！