企业官网建设流程全解析

// to fix style.el-form-search{float:right;.el-form-search-item{margin-bottom:0px;.el-input__inner{width:140px;}}}

案例（包括完整）

style=“display: flex; align-items: center; gap: 10px;justify-content: flex-end”

<div style="display: flex; align-items: center; gap: 10px;justify-content: flex-end"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="el-form-search"> <el-form-item label="分类名称" prop="categoryName" class="el-form-search-item"> <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="分类编码" prop="code" class="el-form-search-item"> <el-input v-model="queryParams.code" placeholder="请输入分类编码" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item class="el-form-search-item"> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </div>

列表圆点状态

<el-table-column label="生效状态"align="center"prop="beffect"width="100"><template slot-scope="scope"><span slot="reference"v-if="scope.row.beffect == 1"><iclass="dotClass"style="background-color: springgreen;width:10px; height:10px; border-radius: 50%; display: block"></i></span><span slot="reference"v-if="scope.row.beffect == 0"><iclass="dotClass"style="background-color: red ;width:10px; height:10px; border-radius: 50%; display: block"></i></span><!--<iclass="dotClass"style="background-color: springgreen;width:10px; height:10px; border-radius: 50%; display: block"></i>--></template></el-table-column>