elementui 中的el-select 怎么实现下拉选项位于下拉框中间位置

elementui 中的el-select 怎么实现下拉选项位于下拉框中间位置

https://element.eleme.cn/#/zh-CN/component/select#zi-ding-yi-mo-ban

自定义模板 ，然后设置样式 text-align:center试试

 <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <div style="text-align:center;width:100%">{{ item.label }}</div>
    
    </el-option>
  </el-select>

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7777434
• 这篇博客也不错, 你可以看下elementui的el-select下拉框在ios系统上需要点击两次才能选中
• 除此之外, 这篇博客: 实现ElementUI中两个Select选择联动效果中的 实现ElementUI中两个Select选择联动效果 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 先上图
  
  通过赋值的方式实现 即子级下拉选项循环数组为空 将所需的值对空数组重新赋值

  代码如下 第一个循环数组为procedureType 第二个是causeGroup 暂且称之为父级与子级

    <el-select 
       v-model="ruleForm.procedure_type" 
       placeholder="请选择" 
       @change="changeSelect"
       >
        <el-option
          v-for="(item,i) in procedureType"
          :key="i"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select 
        v-model="ruleForm.cause_group" 
        placeholder="请选择" 
        style="margin-left: 30px"
        >
        <el-option
          v-for="(item,i) in causeGroup"
          :key="i"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
  

  须注意的是父级下拉绑定的change事件 要对子级作出滞空操作 也就是清空子选项的值
  不然会出现切换选项1 或者 选项2的时候子级选项值保留的问题 如下所示

  

   methods: {
      changeSelect() {
        // 联动子级滞空
        this.ruleForm.cause_group = "";
        // 循环遍历父级
        for (const k in this.procedureType) {
          if (this.ruleForm.procedure_type === this.procedureType[k]) {
          // 核心代码在这里 进行赋值操作
            this.causeGroup = this.TypeObj[this.ruleForm.procedure_type];
          }
        }
      },
    },
    data() {
      return {
      // 在这里定义所需的值
        procedureType: ["选项a", "选项b"],
        TypeObj: {
          选项a: ["连级选项a1", "连级选项a2", "连级选项a3"],
          选项b: ["连级选项b1", "连级选项b2", "连级选项b3"],
        },
        ruleForm: {
          procedure_type: "",
          cause_group: "",
        },
        // 由 changeSelect 接管 causeGroup 的值
        causeGroup: [],
      };
    },
  

  到这里已经实现了两个Select下拉联动的效果 关键就在于将定义好的值赋值给子级数组
  本文是模拟假数据 所以直接在数组定义数据 如果是从接口拿值 在接口请求处将数据赋给procedureType与TypeObj即可
  其实还有更简单的写法 子级数组直接循环 不进行赋值操作 但仍需保留滞空操作

  <el-select
        v-model="ruleForm.cause_group"
        placeholder="请选择"
        style="margin-left: 30px"
      >
        <el-option
          v-for="(item, i) in TypeObj[ruleForm.procedure_type]"
          :key="i"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
  

• 您还可以看一下 徐杨老师的ElementUI入门到实战教程课程中的 select选择器以及级联选择器小节, 巩固相关知识点