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

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

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出溧水免費(fèi)做網(wǎng)站回饋大家。

1.根據(jù)數(shù)據(jù)的某個字段更新按鈕的數(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)控隊列, 是否繼續(xù)?" : "主機(jī)加入監(jiān)控隊列, 是否繼續(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)控隊列成功');
            } else {
                this.$message.warning('主機(jī)加入監(jiān)控隊列成功');
            }
            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="操作事項"></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="責(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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：web開發(fā)中如何根據(jù)字段結(jié)果渲染不同按鈕
URL分享：http://www.muchs.cn/article30/ishiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、ChatGPT、建站公司、小程序開發(fā)、網(wǎng)站設(shè)計公司、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)