el-select disable颜色

el-select组件的disable状态下的颜色可以通过CSS样式来进行自定义。你可以使用以下样式来修改disable状态下的颜色：

/* 修改禁用状态下的文本颜色 */
.el-select[disabled] .el-input__inner {
  color: #999999;
}

/* 修改禁用状态下的边框颜色 */
.el-select[disabled] .el-input__inner {
  border-color: #cccccc;
}

/* 修改禁用状态下的背景颜色 */
.el-select[disabled] .el-input__inner {
  background-color: #f5f5f5;
}

将上述样式添加到你的项目中的CSS文件中，或者直接在页面中使用`<style>`标签包裹起来即可。请根据你的需求进行相应的颜色替换。这样就可以自定义el-select组件disable状态下的颜色了。

相关问题

el-option 点击事件后阻止el-select关闭

要阻止el-select在el-option点击事件后关闭，可以使用以下方法：
首先，设置 disable-remote="false" 来启用el-option的鼠标事件。
然后，利用 @mouseenter.native="optionMouseOver(index)" 来存储选中的行。
在el-select的change事件后，由于mouseleave事件的原因，this.optionHoverIndex会发生变化，所以可以使用visible-change事件来初始化 this.optionHoverIndex。
同时，需要注意使用.stop和.native的搭配使用。

在代码中，可以这样实现：

<el-select v-model="importForm.templateCode" placeholder="请选择" class="w-500px template-select" @visible-change="visibleChange">
  <el-option v-for="(item, index) in templateList" :key="index" :label="item.templateName" :value="item.templateCode" :disable-remote="false" @mouseenter.native="optionMouseOver(index)">
    <span style="float: left">{{ item.templateName }}</span>
    <span style="float: right" class="t-blue" :style="index === optionHoverIndex ? 'display:block' : 'display:none'">
      <span v-if="!item.isDefault" @click.stop="setTempDefault(item)">设为默认</span>
      <span v-else>已默认</span>
    </span>
  </el-option>
</el-select>

这样，当点击el-option中的按钮时，点击事件将被阻止，el-select不会关闭。同时，通过visible-change事件来初始化this.optionHoverIndex，确保选中的行可以正确显示后置按钮。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

el-select 选中后的标签自定义

el-select 是 Element-UI 组件中的下拉选择器，其标签自定义可以通过 slot-scope 实现。在 el-select 中，可以通过 slot-scope="scope" 获取数据对象 scope，其中的选项 label 和 value 可以作为 el-select 选中后的标签。

具体实现步骤如下：

1. 在 el-select 中添加一个 slot，使用 slot-scope 获取数据对象 scope。
2. 在选项中添加属性 slot-scope="option"，使用 option.label 和 option.value 可以获取当前选项的 label 和 value。
3. 自定义标签模板，可以使用 scope.selected.map(option => option.label).join(", ") 输出选择的选项的 label 值。

举个例子，代码如下：

<el-select v-model="selectedOptions" multiple>
  <el-option
    v-for="option in options"
    :key="option.id"
    :label="option.label"
    :value="option.value"
    slot-scope="option"
  />
  <template slot="selection" slot-scope="scope">
    <span class="el-select__tags">
      <span
        class="el-select__tags-text"
        v-if="scope.selected.length === 0"
      >请选择</span>
      <el-tag
        v-for="option in scope.selected"
        :key="option.value"
        :closable="true"
        :disable-transitions="true"
        @close="handleClose(option, scope.selected)"
      >{{ option.label }}</el-tag>
    </span>
  </template>
</el-select>

通过以上代码，可以自定义 el-select 选中后的标签，并且可以实现多选和删除已选中的选项。