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

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

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

如果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开发中如何根据字段结果渲染不同按钮"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！