Why is the style messy when I switch to another page and then switch back?

clipboard.png

clipboard.png

<div class="tableTop">
    <el-form :inline="true" class="searchFormu searchCommon">
        <el-form-item label="">
            <el-input v-model="bookname" ref="booknameInput" placeholder="" @keyup.enter.native="handleEnter" clearable @clear="handleClear"></el-input>
        </el-form-item>

        <el-form-item label="">
            <el-select class="typeSelect" v-model="bookcategory" ref="bookcategoryInput" @change="selectChange" placeholder="" style="width: 160px;" clearable>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item style="margin-right:0;">
            <el-button type="primary" icon="search" :loading="isQuery" @click="searchHandler"></el-button>
            </el-form-item>
        </el-form>
</div>

.tableTop {
padding: 20px 10px 0px;
}

.searchFormu {

float: left;
padding: 0;

}

Sep.09,2021

is it true that other pages have the same css class name, but different styles


style are followed by scoped,? don't ask me why


should be caused by scoped. Other pages have this class name. When the page returns, it is the style of that page with the same class name


or each page uses a unique class name. Or add scoped to add hash to you when compiling

Menu