| Form 表单组件 | 您所在的位置：网站首页 › vue3虚拟列表选择器 › Form 表单组件 |
|
背景基础用法多选隐藏多余标签的多选可过滤的多选禁用选择器本身或选项给选项进行分组自定义选项的渲染模板一键清除创建临时选项远程搜索使用 value-keySelectV2 属性SelectV2 事件SelectV2 插槽源代码贡献者 Select V2 虚拟列表选择器beta TIP 这个组件目前在测试当中，如果在使用中发现任何漏洞和问题，请在 GitHub 中提交 issue 以便我们进行处理。 背景在某些使用情况下，单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担，从而造成性能问题。 为了更好的用户和开发者体验，我们决定添加此组件。 基础用法适用广泛的基础选择器 import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref('')const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`,})).example-showcase .el-select-v2 { margin-right: 20px;}多选最基础的多选选择器 import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref([])const options = ref( Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`, })))隐藏多余标签的多选默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。 use collapse-tags use collapse-tags-tooltip import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref([])const value2 = ref([])const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`,}))可过滤的多选当选项太多时，你可以使用 filterable 选项来启用过滤功能来找到所需的选项。 import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref([])const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option${idx + 1}`, label: `${initials[idx % 10]}${idx}`,}))禁用选择器本身或选项您可以选择禁用 Select 或者 Select 中的某个选项 import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref([])const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option${idx + 1}`, label: `${initials[idx % 10]}${idx}`, disabled: idx % 10 === 0,}))给选项进行分组只要数据格式满足特定要求，我们就可以按照自己的意愿为选项进行分组。 import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref([])const options = Array.from({ length: 10 }).map((_, idx) => { const label = idx + 1 return { value: `Group ${label}`, label: `Group ${label}`, options: Array.from({ length: 10 }).map((_, idx) => ({ value: `Option ${idx + 1 + 10 * label}`, label: `${initials[idx % 10]}${idx + 1 + 10 * label}`, })), }})自定义选项的渲染模板我们也可以通过自定义模板来渲染自己想要的选项内容。 {{ item.label }} {{ item.value }} import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref([])const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`,}))一键清除我们可以同时清除所有选定的选项。此设定也可适用于单选。 import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value1 = ref([])const value2 = ref('')const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`,}))创建临时选项可以创建并选中未包含在初始选项中的条目。 通过使用 allow-create 属性，用户可以通过输入框创建新项目。 为了使 allow-create 正常工作， filterable 的值必须为 true。 TIP 最好在使用 allow-create 属性的同时设置 :reserve-keyword="false"。 set reserve-keyword false import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value1 = ref([])const value2 = ref('')const value3 = ref([])const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`,}))远程搜索输入关键字以从远程服务器中查找数据。 为了启用远程搜索，需要将 filterable 和remote 设置为 true，同时传入一个 remote-method。 remote-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。 import { ref } from 'vue'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',]const list = states.map((item): ListItem => { return { value: `value:${item}`, label: `label:${item}` }})interface ListItem { value: string label: string}const value = ref([])const options = ref([])const loading = ref(false)const remoteMethod = (query: string) => { if (query !== '') { loading.value = true setTimeout(() => { loading.value = false options.value = list.filter((item) => { return item.label.toLowerCase().includes(query.toLowerCase()) }) }, 200) } else { options.value = [] }}使用 value-key当 options.value 是一个对象时，您需要指定一个 key import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref('')const options = Array.from({ length: 1000 }).map((_, idx) => ({ value: { name: `Option ${idx + 1}`, test: `test ${idx % 3}`, }, label: `${initials[idx % 10]}${idx}`,})).example-showcase .el-select-v2 { margin-right: 20px;}SelectV2 属性属性说明类型可选值默认值model-value / v-model绑定值string / number / boolean / object——multiple是否多选boolean—falsedisabled是否禁用boolean—falsevalue-key作为 value 唯一标识的键名，绑定值为对象类型时必填string—valuesize输入框尺寸stringlarge/default/smalldefaultclearable是否可以清空选项boolean—falseclear-icon自定义清除图标string | Component—CircleClosecollapse-tags多选时是否将选中值按文字的形式展示boolean—falsecollapse-tags-tooltip当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 只有当 collapse-tags 设置为 true 时才会生效。booleantrue / falsefalsemultiple-limit多选时可被选择的最大数目。 当被设置为0时，可被选择的数目不设限。number—0name选择器的原生name属性string——effect文字提示（Tooltip）的主题，内置dark和light两种。stringstringlightautocomplete自动完成选择输入string—offplaceholderselect input的原生autocomplete属性string—Please selectfilterable是否可筛选boolean—falseallow-create是否允许创建新条目， 当使用该属性时，filterable必须设置为trueboolean—falsereserve-keyword筛选时，是否在选择选项后保留关键字boolean—trueno-data-text当在没有数据时显示的文字，你同时可以使用#empty插槽进行设置。string—No Datapopper-class选择器下拉菜单的自定义类名string——popper-append-to-body(deprecated)是否将弹出框插入至 body 元素 当弹出框的位置出现问题时，你可以尝试将该属性设置为false。boolean-falseteleported该下拉菜单是否使用teleport插入body元素booleantrue / falsetruepersistent当下拉选择器未被激活并且persistent设置为false，选择器会被删除。booleantrue / falsetruepopper-options自定义 popper 选项，更多请参考 popper.js object--automatic-dropdown对于不可过滤的 Select 组件，此属性决定是否在输入框获得焦点后自动弹出选项菜单boolean-falseheight下拉菜单的高度，每一个子选项的高度是 34pxnumber-170scrollbar-always-on控制是否总是展示滚动条boolean-falseremote是否从服务器搜索数据boolean—falseremote-method当输入值发生变化时被调用的函数。 其参数是当前输入值。 只有当 filterable 设置为 true 时才会生效。function(keyword: string)——validate-event输入时是否触发表单的校验boolean-true SelectV2 事件事件名说明回调参数change选中值发生变化时触发val，目前的选中值visible-change下拉框出现/隐藏时触发val，出现则为 true，隐藏则为 falseremove-tag多选模式下移除tag时触发val，移除的tag值clear可清空的单选模式下用户点击清空按钮时触发—blur当选择器的输入框失去焦点时触发(event: Event)focus当选择器的输入框获得焦点时触发(event: Event) SelectV2 插槽插槽名说明default自定义 Option 模板empty自定义当选项为空时的内容prefix输入框的前缀 源代码组件 • 文档 贡献者云游君 三咲智子 Jeremy msidolphin Alan Wang Xc btea Aex Delyan Haralanov Herrington Darkholme zz Carter Li joson kooriookami sechi ashun Hefty Cheerwhy 白雾三语 BeADre bqy Ryan2128 spx weidehai 啝裳 Dreamcreative C.Y.Kun LinZhanMing qiang Yorn Qiu Calum Knott |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |