el-select 下拉框列表与选中后展示值不同

665 阅读1分钟

日常的下拉框长这样:

        <el-select
          style="width: 100%"
          v-model="editForm.provider.cooperatorId"
          filterable
          @focus="handleFocus('provider')"
          remote
          :remote-method="(query)=>{handleRemote(query,'provider')}"
          v-el-select-loadmore="()=>loadmoreOptions('provider')"
        >
          <el-option
            v-for="type in providerOptions"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

但是有时下拉列表会拼接一些信息,比如label拼接了name与id:

image.png

但是我只想展示微信公众号,而不要前面的编号,可以写为以下:

        <el-select
          style="width: 100%"
          v-model="editForm.provider.cooperatorId"
          filterable
          @focus="handleFocus('provider')"
          remote
          :remote-method="(query)=>{handleRemote(query,'provider')}"
          v-el-select-loadmore="()=>loadmoreOptions('provider')"
        >
          <el-option
            v-for="type in providerOptions"
            :key="type.value"
            :label="type.cooperatorName" // 这里改变了
            :value="type.value"
          >
            <span style="float: left">{{ type.label }}</span> // 这里改变了
          </el-option>
        </el-select>
      </el-form-item>