Select V2 虛擬列表選擇器

這個(gè)組件目前在測(cè)試當(dāng)中，如果在使用中發(fā)現(xiàn)任何漏洞和問(wèn)題，請(qǐng)?jiān)?nbsp;Github 中提交 issue 以便我們進(jìn)行處理

背景

在數(shù)據(jù)量爆發(fā)的今天，很多時(shí)候一個(gè)選擇器可能從服務(wù)器加載非常多的數(shù)據(jù)，然而瀏覽器在一次性把這些數(shù)據(jù)渲染到頁(yè)面上的時(shí)候會(huì)出現(xiàn)卡頓甚至是崩潰的情況，所以虛擬化技術(shù)應(yīng)運(yùn)而生，為了更好的用戶體驗(yàn)和更好的使用體驗(yàn)，我們決定添加這個(gè)組件。

基礎(chǔ)用法

適用廣泛的基礎(chǔ)選擇器

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px;"
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value: '',
      }
    },
  }
</script>

多選

最基礎(chǔ)的多選選擇器

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px;"
    multiple
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value: [],
      }
    },
  }
</script>

隱藏多余標(biāo)簽的多選

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px;"
    multiple
    collapse-tags
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value: [],
      }
    },
  }
</script>

可篩選的多選

當(dāng)選項(xiàng)過(guò)多時(shí)，可通過(guò)匹配篩選

<template>
  <el-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px;"
    multiple
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value: [],
      }
    },
  }
</script>

禁用狀態(tài)

您可以選擇禁用 Select 或者 Select 的 Option

<template>
  <el-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px; margin-right: 16px; vertical-align: middle;"
    multiple
  />
  <el-select-v2
    disabled
    v-model="value"
    filterable
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px; vertical-align: middle;"
    multiple
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
          disabled: idx % 10 === 0,
        })),
        value: [],
      }
    },
  }
</script>

選項(xiàng)分組

我們可以為選項(xiàng)分組，只需要滿足例子里的這個(gè) pattern

<template>
  <el-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px;"
    multiple
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 10 }).map((_, idx) => {
          const label = idx + 1
          return {
            value: `組 ${label}`,
            label: `組 ${label}`,
            options: Array.from({ length: 10 }).map((_, idx) => ({
              value: `選項(xiàng)${idx + 1 + 10 * label}`,
              label: `${initials[idx % 10]}${idx + 1 + 10 * label}`,
            })),
          }
        }),
        value: [],
      }
    },
  }
</script>

自定義渲染模板

我們也可以通過(guò)自己自定義模板來(lái)渲染自己想要的內(nèi)容。

<template>
  <el-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px;"
    multiple
  >
    <template #default="{item}">
      <span style="margin-right: 8px;">{{ item.label }}</span>
      <span style="color: var(--el-text-color-secondary); font-size: 13px">
        {{ item.value }}
      </span>
    </template>
  </el-select-v2>
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value: [],
      }
    },
  }
</script>

一鍵清除

一鍵刪除所有的選項(xiàng)（也可適用于單選）

<template>
  <el-select-v2
    v-model="value1"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px; margin-right: 16px; vertical-align: middle;"
    multiple
    clearable
  />
  <el-select-v2
    v-model="value2"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px; vertical-align: middle;"
    clearable
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value1: [],
        value2: '',
      }
    },
  }
</script>

創(chuàng)建臨時(shí)選項(xiàng)

可以創(chuàng)建并選中選項(xiàng)中不存在的條目

使用allow-create屬性即可通過(guò)在輸入框中輸入文字來(lái)創(chuàng)建新的條目。注意此時(shí)filterable必須為真。

<template>
  <el-select-v2
    v-model="value1"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px; margin-right: 16px; vertical-align: middle;"
    allow-create
    filterable
    multiple
    clearable
  />
  <el-select-v2
    v-model="value2"
    :options="options"
    placeholder="請(qǐng)選擇"
    style="width: 240px; vertical-align: middle;"
    allow-create
    filterable
    clearable
  />
</template>

<script>
  const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  export default {
    data() {
      return {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          value: `選項(xiàng)${idx + 1}`,
          label: `${initials[idx % 10]}${idx}`,
        })),
        value1: [],
        value2: '',
      }
    },
  }
</script>

遠(yuǎn)程搜索

從服務(wù)器搜索數(shù)據(jù)，輸入關(guān)鍵字進(jìn)行查找

為了啟用遠(yuǎn)程搜索，需要將filterable和remote設(shè)置為true，同時(shí)傳入一個(gè)remote-method。remote-method為一個(gè)Function，它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用，參數(shù)為當(dāng)前輸入值。

<template>
  <el-select-v2
    v-model="value"
    style="width: 240px"
    multiple
    size="medium"
    filterable
    remote
    :remote-method="remoteMethod"
    clearable
    :options="options"
    :loading="loading"
    placeholder="請(qǐng)輸入關(guān)鍵詞"
  />
</template>

<script>
  export default {
    created() {
      this.list = this.states.map((item) => {
        return { value: `value:${item}`, label: `label:${item}` }
      })
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options = this.list.filter((item) => {
              return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options = []
        }
      },
    },
    data() {
      return {
        list: [],
        loading: false,
        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',
        ],
        options: [],
        value: [],
      }
    },
  }
</script>

SelectV2 Attributes

SelectV2 Events

SelectV2 Slots