微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐