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開發中如何根據字段結果渲染不同按鈕”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！