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)
        }
    }
})

可直接复制使用

相关推荐
南岸月明1 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD15 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip20 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济25 分钟前
后端程序员的CSS复习
前端
Enddme28 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员30 分钟前
微信小程序使用 Tailwind CSS version 3
前端
wocwin40 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
你怎么知道我是队长1 小时前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas