ETU组件库

Appearance

Return to top
On this page

Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值

<template>
  <div>
    <etu-select v-model="value" placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

<template>
  <div>
    <etu-select v-model="value" placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

有禁用选项

在 el-option 中，设定 disabled 值为 true，即可禁用该选项

<template>
  <div >
    <etu-select v-model="value" placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
    disabled: true,
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

<template>
  <div >
    <etu-select v-model="value" placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
    disabled: true,
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

禁用状态

禁用整个选择器组件

<template>
  <div>
    <etu-select v-model="value" disabled placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

<template>
  <div>
    <etu-select v-model="value" disabled placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

可清空单选

您可以使用清除图标来清除选择。

<template>
  <div >
    <etu-select v-model="value" clearable placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

<template>
  <div >
    <etu-select v-model="value" clearable placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

基础多选

多选选择器使用 tag 组件来展示已选中的选项。

<template>
  <div>
    <etu-select v-model="value" placeholder="please select a option" multiple>
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref([]);
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

<template>
  <div>
    <etu-select v-model="value" placeholder="please select a option" multiple>
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref([]);
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

将选项进行分组

你可以为选项进行分组来区分不同的选项

<template>
  <div>
    <etu-select v-model="value" placeholder="Please select a option">
      <etu-option-group
        v-for="options in optionsGroup"
        :key="options.toString()"
        :label="options.label"
      >
        <etu-option
          v-for="item in options.options"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        ></etu-option>
      </etu-option-group>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const optionsGroup = [
  {
    label: "Popular cities",
    options: [
      {
        value: "Shanghai",
        label: "Shanghai",
        disabled: true,
      },
      {
        value: "Beijing",
        label: "Beijing",
      },
    ],
  },
  {
    label: "City name",
    options: [
      {
        value: "Chengdu",
        label: "Chengdu",
      },
      {
        value: "Shenzhen",
        label: "Shenzhen",
      },
      {
        value: "Guangzhou",
        label: "Guangzhou",
      },
      {
        value: "Dalian",
        label: "Dalian",
      },
    ],
  },
];

const loading = ref(false);

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase());
      });
    }, 200);
  } else {
    options.value = [];
  }
};
</script>
i

<template>
  <div>
    <etu-select v-model="value" placeholder="Please select a option">
      <etu-option-group
        v-for="options in optionsGroup"
        :key="options.toString()"
        :label="options.label"
      >
        <etu-option
          v-for="item in options.options"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        ></etu-option>
      </etu-option-group>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const optionsGroup = [
  {
    label: "Popular cities",
    options: [
      {
        value: "Shanghai",
        label: "Shanghai",
        disabled: true,
      },
      {
        value: "Beijing",
        label: "Beijing",
      },
    ],
  },
  {
    label: "City name",
    options: [
      {
        value: "Chengdu",
        label: "Chengdu",
      },
      {
        value: "Shenzhen",
        label: "Shenzhen",
      },
      {
        value: "Guangzhou",
        label: "Guangzhou",
      },
      {
        value: "Dalian",
        label: "Dalian",
      },
    ],
  },
];

const loading = ref(false);

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase());
      });
    }, 200);
  } else {
    options.value = [];
  }
};
</script>
i

筛选选项

可以利用筛选功能快速查找选项。

<template>
  <div>
    <etu-select v-model="value" filterable placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

<template>
  <div>
    <etu-select v-model="value" filterable placeholder="please select a option">
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>
i

远程搜索

输入关键字以从远程服务器中查找数据。

<template>
  <div>
    <etu-select
      v-model="value"
      filterable
      remote
      placeholder="Please enter a keyword"
      remote-show-suffix
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
interface ListItem {
  value: string;
  label: string;
}

const list = ref<ListItem[]>([]);
const options = ref<ListItem[]>([]);
const value = ref("Beijing");
const loading = ref(false);

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` };
  });
});

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase());
      });
    }, 200);
  } else {
    options.value = [];
  }
};

const states = [
  "Alabama",
  "Alaska",
  "Arizona",
  "Arkansas",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "Florida",
  "Georgia",
  "Hawaii",
  "Idaho",
  "Illinois",
  "Indiana",
  "Iowa",
  "Kansas",
  "Kentucky",
  "Louisiana",
  "Maine",
  "Maryland",
  "Massachusetts",
  "Michigan",
  "Minnesota",
  "Mississippi",
  "Missouri",
  "Montana",
  "Nebraska",
  "Nevada",
  "New Hampshire",
  "New Jersey",
  "New Mexico",
  "New York",
  "North Carolina",
  "North Dakota",
  "Ohio",
  "Oklahoma",
  "Oregon",
  "Pennsylvania",
  "Rhode Island",
  "South Carolina",
  "South Dakota",
  "Tennessee",
  "Texas",
  "Utah",
  "Vermont",
  "Virginia",
  "Washington",
  "West Virginia",
  "Wisconsin",
  "Wyoming",
];
</script>

<template>
  <div>
    <etu-select
      v-model="value"
      filterable
      remote
      placeholder="Please enter a keyword"
      remote-show-suffix
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <etu-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      ></etu-option>
    </etu-select>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
interface ListItem {
  value: string;
  label: string;
}

const list = ref<ListItem[]>([]);
const options = ref<ListItem[]>([]);
const value = ref("Beijing");
const loading = ref(false);

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` };
  });
});

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase());
      });
    }, 200);
  } else {
    options.value = [];
  }
};

const states = [
  "Alabama",
  "Alaska",
  "Arizona",
  "Arkansas",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "Florida",
  "Georgia",
  "Hawaii",
  "Idaho",
  "Illinois",
  "Indiana",
  "Iowa",
  "Kansas",
  "Kentucky",
  "Louisiana",
  "Maine",
  "Maryland",
  "Massachusetts",
  "Michigan",
  "Minnesota",
  "Mississippi",
  "Missouri",
  "Montana",
  "Nebraska",
  "Nevada",
  "New Hampshire",
  "New Jersey",
  "New Mexico",
  "New York",
  "North Carolina",
  "North Dakota",
  "Ohio",
  "Oklahoma",
  "Oregon",
  "Pennsylvania",
  "Rhode Island",
  "South Carolina",
  "South Dakota",
  "Tennessee",
  "Texas",
  "Utah",
  "Vermont",
  "Virginia",
  "Washington",
  "West Virginia",
  "Wisconsin",
  "Wyoming",
];
</script>

Scrollbar 属性

属性名说明类型可选值默认值
height滚动条高度string/number--
max-height滚动条最大高度string/number--

DatePicker 事件

事件名说明类型
scroll当触发滚动事件时，返回滚动的距离Function

Scrollbar 插槽

名称说明
—自定义默认内容