web開發(fā)中如何根據(jù)字段結(jié)果渲染不同按鈕

這篇文章主要介紹web開發(fā)中如何根據(jù)字段結(jié)果渲染不同按鈕，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1.根據(jù)數(shù)據(jù)的某個(gè)字段更新按鈕的數(shù)據(jù)

<el-row >
    <el-col :span="16" :offset="3">
        <el-table :data="hostData" border >
        <el-table-column prop="ip" label="內(nèi)網(wǎng)IP"></el-table-column>
        <el-table-column prop="bk_os_name" label="系統(tǒng)名"></el-table-column>
        <el-table-column prop="host_name" label="主機(jī)名"></el-table-column>
        <el-table-column prop="cloud_name" label="云區(qū)域"></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 ? "移除監(jiān)控":"加入監(jiān)控" }}</el-button>
                <el-button type="warning" size="small" @click="getPerformData(scope.row)">查看性能</el-button>
                <el-button type="danger" size="small" @click="getStatus(scope.row)">查看狀態(tài)</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的值為移除監(jiān)控，否則值為加入監(jiān)控

可選的js代碼

const tmpText = row.is_monitored ? "主機(jī)移除監(jiān)控隊(duì)列, 是否繼續(xù)?" : "主機(jī)加入監(jiān)控隊(duì)列, 是否繼續(xù)?";

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('主機(jī)移除監(jiān)控隊(duì)列成功');
            } else {
                this.$message.warning('主機(jī)加入監(jiān)控隊(duì)列成功');
            }
            this.getSearch();
        } else {
            this.$message.error('更新主機(jī)監(jiān)控狀態(tài)失敗');
        }
    }, 'json');
}).catch(() => {
    this.$message({type: 'info', message: '已取消更新'});
});

2.根據(jù)字段不同，給el-button賦于不同的type屬性

<el-row >
    <el-table :data="jobDetailData" border >
        <el-table-column prop="operate" label="操作事項(xiàng)"></el-table-column>
        <el-table-column prop="note" label="備注"></el-table-column>
        <el-table-column prop="answer_time" label="完成時(shí)間"></el-table-column>
        <el-table-column prop="creater" label="責(zé)任人"></el-table-column>
        <el-table-column prop="confirmer" label="確認(rèn)人"></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">確認(rèn)完成</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開發(fā)中如何根據(jù)字段結(jié)果渲染不同按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！