【el-form同一行展示省市区】

如果要让省市区显示在<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>

猜你喜欢

转载自blog.csdn.net/weixin_43866250/article/details/132634173