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 属性被设置为空字符串 "",这样就会隐藏下拉框右侧的箭头。

posted @ 2024-04-24 06:34  侬侬发  阅读(160)  评论(0编辑  收藏  举报