suffix-icon屬性隱藏el-select下拉框右邊的下拉圖示

侬侬发發表於2024-04-24
<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 屬性被設定為空字串 ""，這樣就會隱藏下拉框右側的箭頭。

相關文章