如果要让省市区显示在<el-select>
框的后面,可以使用 Flex 布局和适当的样式设置。
以下是一个示例:
<el-form>
<el-form-item label="请选择地区" class="area-select">
<div class="select-wrapper">
<el-select v-model="selectedProvince" placeholder="省份">
<el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
</el-select>
<el-select v-model="selectedCity" placeholder="城市">
<el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
</el-select>
<el-select v-model="selectedDistrict" placeholder="区县">
<el-option v-for="district in districts" :key="district.id" :label="district.name" :value="district.id"></el-option>
</el-select>
</div>
</el-form-item>
</el-form>
然后在<style>
标签中添加 CSS 样式来设置 Flex 布局和元素的排列顺序:
<style>
.area-select {
display: flex;
align-items: center;
}
.select-wrapper {
display: flex;
align-items: center;
}
.el-select {
margin-right: 10px;
}
</style>