网站建设公司市场开发方案,织梦网站搬家教程,互联网大厂有哪些,春哥技术团队网站建设前言 最近开发项目使用element-plus库内的select组件#xff0c;其中有提供一个创建新的选项的用法#xff0c;但是发现一些小问题#xff0c;在此记录 版本 “element-plus”: “^2.3.9”, “vue”: “^3.3.4”, 问题 1、在options数据源中无数据的时候#xff0c;在输入框…前言 最近开发项目使用element-plus库内的select组件其中有提供一个创建新的选项的用法但是发现一些小问题在此记录 版本 “element-plus”: “^2.3.9”, “vue”: “^3.3.4”, 问题 1、在options数据源中无数据的时候在输入框中输入要创建的选项ele会自动帮我们选中第一条然后回车后会自动给绑定值中push进一条数据进去 2、但是options数据源中有数据的时候若输入框中的值可以匹配上数据源的话回车后会自动选中但是再无数据的时候需要回车后创建数据却无法选中 解决办法 有数据源的情况下直接监听回车事件再敲击回车后后获取到输入框中的值手动将值添加进去 代码如下
script setup
import { ref } from vue
const options ref([{value: HTML,label: HTML,},{value: CSS,label: CSS,},{value: JavaScript,label: JavaScript,},
])
const selectValue ref([])
// 获取select实例
const selectRef ref(null)
// 监听select回车事件
const selectCreate function() {// 当options数据源中无值的话回车后elementplus是可以正常新增的无需手动添加if (options.value.length 0) return// 通过select实例获取到内部input节点const inputDom selectRef.value.input// 通过input节点获取到输入值const domValue inputDom.value// 过滤掉空的数据if (!domValue) return// 将输入值手动push进selectValue中selectValue.value.push(domValue)// 最后将input中的值清空即可selectRef.value.input
}/scripttemplateel-select refselectRef v-modelselectValue multiple filterable allow-create default-first-option :reserve-keywordfalse placeholder回车后创建 keyup.enter.nativeselectCreateel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value//el-select
/templatestyle scoped
/style
拓展 既然是创建新选项但是在创建完成后数据源中却没有新增出来一条不知道你们是否跟我有同样的疑问可能是因为新创建出来的选项并非属于原有数据源所以ele开发人员才并未提供可以直接加入到数据源中的api吧 既然我们都可以通过获取实例的方式获取到input中当前输入的值了那么直接改造一下手动加进去不就行了吗 代码如下 script setup
import { ref } from vueconst options ref([])
// 拓展既然可以获取到数据框中的值了那么在回车创建完选项后顺带在数据源中也新增一条数据也是可以的毕竟这样才更加符合创建了一个新的选项
const selectValue ref([])
// 获取select实例
const selectRef ref(null)
// 监听select回车事件
const selectCreate function() {// 当options数据源中无值的话回车后elementplus是可以正常新增的无需手动添加且监听到回车后input值也是空的if (options.value.length 0) return// 通过select实例获取到内部input节点const inputDom selectRef.value.input// 通过input节点获取到输入值const domValue inputDom.value// 过滤掉空的数据if (!domValue) return// 将输入值手动push进selectValue中selectValue.value.push(domValue)// 手动在数据源中也新增一条进去options.value.push({value: selectRef.value.input.value,label: selectRef.value.input.value});// 最后将input中的值清空即可selectRef.value.input
}
// 选项被选中后回调
const selectChange function(seleItem) {const data seleItem[seleItem.length - 1]if (!data) return// 判断数据源中没有的话手动加入if (options.value.every(item item.value ! data)) {options.value.push({value: data,label: data});}
}/scripttemplateel-select refselectRef v-modelselectValue multiple filterable allow-create default-first-option :reserve-keywordfalse placeholder回车后创建 keyup.enter.nativeselectCreate changeselectChangeel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value//el-select
/templatestyle scoped
/style
