suffix-icon属性隐藏el-select下拉框右边的下拉图标

<el-form-item label="入库类型" prop="mt_type">
          <el-select
              v-model="form.mt_type"
              filterable
              placeholder="请选择"
              style="width: 145px"
              :disabled="true"
          >
            <el-option
                v-for="item in mt_typeOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>

以上是个禁用的下拉框,如何隐藏右边的下拉箭头

要隐藏下拉框右侧的箭头,你可以使用 Element UI 提供的 suffix-icon 属性。你可以将 suffix-icon 设置为空字符串或者一个不显示的图标,来隐藏箭头。

以下是一个示例:

<template>
  <el-form-item label="入库类型" prop="mt_type">
    <el-select
      v-model="form.mt_type"
      filterable
      placeholder="请选择"
      style="width: 145px"
      :disabled="true"
      suffix-icon=""
    >
      <el-option
        v-for="item in mt_typeOptions"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      >
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      form: {
        mt_type: null // 初始值
      },
      mt_typeOptions: [ /* 选项列表 */ ] // 下拉框选项
    };
  }
};
</script>

在这个示例中,suffix-icon 属性被设置为空字符串 "",这样就会隐藏下拉框右侧的箭头。

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...