el-select可输入下拉框限制长度

el-select可输入或可输入创建限制长度

可创建自定义指令v-Length="50",限制输入最大长度为50

javascript 复制代码
<el-select
    v-model="JSDW"
    filterable
    clearable
    v-limitLength="50"
    allow-create
    default-first-option
    style="width:100%">
    <el-option
        v-for="(item, index) in ListJSDW"
        :key="index"
        :label="item"
        :value="item">
    </el-option>
</el-select>

局部创建自定义指令

javascript 复制代码
created() {

},
// 控制-select输入长度 自定义指令
// 控制-select输入长度 自定义指令
 directives: {
     limitLength: {
         bind: function (el, binding, vnode) {
             const input = el.getElementsByTagName('input')[0]
             if (input) {
                 input.setAttribute('maxlength', binding.value)
             }
         }
     }
 },
mounted() {

},

全局创建自定义指令,在main.js里

javascript 复制代码
Vue.directive('limitLength',{
    inserted: function (el, binding, vnode) {
        const input = el.getElementsByTagName('input')[0]
        if (input) {
            input.setAttribute('maxlength', binding.value)
        }
    }
})

可直接复制使用

相关推荐
武天15 小时前
Vue常用的修饰符有哪些?分别有什么应用场景?
vue.js
小岛前端15 小时前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
武天15 小时前
vue 中怎么实现样式隔离?
vue.js
用户15105810474315 小时前
带leading和trailing的防抖和节流
前端
武天15 小时前
Vue2动态给 data添加一个新的属性时会发生什么
vue.js
武天15 小时前
说下前端状态管理库pinia
vue.js
IT小哥哥呀15 小时前
论文见解:REACT:在语言模型中协同推理和行动
前端·人工智能·react.js·语言模型
一枚前端小能手15 小时前
🚫 请求取消还在用flag?AbortController让你的异步操作更优雅
前端·javascript
JohnYan15 小时前
工作笔记 - VSCode ssh远程开发
javascript·ssh·visual studio code
武天15 小时前
手写 vue 2的双向绑定
vue.js