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

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

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

<el-row >
    <el-col :span="16" :offset="3">
        <el-table :data="hostData" border >
        <el-table-column prop="ip" label="内网IP"></el-table-column>
        <el-table-column prop="bk_os_name" label="系统名"></el-table-column>
        <el-table-column prop="host_name" label="主机名"></el-table-column>
        <el-table-column prop="cloud_name" label="云区域"></el-table-column>
        <el-table-column prop="mem_use" label="Mem(%)"></el-table-column>
        <el-table-column prop="disk_use" label="Disk(%)"></el-table-column>
        <el-table-column prop="cpu_use" label="CPU(%)"></el-table-column>
        <el-table-column label="操作" width="300%">
            <template slot-scope="scope">
                <el-button :type='scope.row.is_monitored ? "primary":"success"' size="small" @click="editHost(scope.row)">{{ scope.row.is_monitored ? "移除监控":"加入监控" }}</el-button>
                <el-button type="warning" size="small" @click="getPerformData(scope.row)">查看性能</el-button>
                <el-button type="danger" size="small" @click="getStatus(scope.row)">查看状态</el-button>
            </template>
        </el-table-column>
    </el-table>
    </el-col>
</el-row>

如果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属性

<el-row >
    <el-table :data="jobDetailData" border >
        <el-table-column prop="operate" label="操作事项"></el-table-column>
        <el-table-column prop="note" label="备注"></el-table-column>
        <el-table-column prop="answer_time" label="完成时间"></el-table-column>
        <el-table-column prop="creater" label="责任人"></el-table-column>
        <el-table-column prop="confirmer" label="确认人"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="confirmOperate(scope.row)"
                            :type='scope.row.status == "已完成" ? "":"primary"'
                            :disabled='scope.row.status == "已完成"'
                            size="small">确认完成</el-button>
            </template>
        </el-table-column>
    </el-table>
</el-row>

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

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

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