el-select可以新建条目时 限制输入字数

一.el-select新建条目需要设置allow-create和filterable
二.限制字数分为两种三种情况来说明
1.页面中仅有一个el-select

/* data中定义 */
subject: '',
subjectOption: [{ name: '哈哈' },{ name: '嘻嘻' }
]
/* methods中定义 */
// 新建科目输入限制
inputSubjectLimit() {var inputSubjectId = document.querySelector('#inputSubjectId')if (inputSubjectId) {inputSubjectId.setAttribute('maxLength', 6)}
}

2.el-select在动态加载的组件中

 inputTypeLimit($event, index)"
>

// 新建报名类型输入限制
inputTypeLimit(event, index) {var inputTypeId = document.querySelector(`#inputTypeId${index}`)if (inputTypeId) {inputTypeId.setAttribute('maxLength', 6)}
}

3.在el-table中，而且通过某个操作表格中的数据会新增

// 新建科目输入限制
addInputLimit(index) {var addInputId = document.querySelector(`#addInputId${index}`)if (addInputId) {addInputId.setAttribute('maxLength', 6)}}

以上，第一次加载的表格数据 科目的下拉框输入有限制。但是，如果点击导入，表格中新增的数据的科目下拉框是没有输入限制的，需要强制刷新此页面。
刷新页面的两种常用方法：
①强制刷新（跟按F5类似，用户体验不好）

location.reload()

this.$router.go(0)

②provide / inject声明注入法




以上，各种情况下，el-select可创建条目的输入限制字数的功能均已实现。
在APP.vue中注入provide/reject会影响其他页面的缓存，可以直接在需要重新加载的表格设置一个变量控制显隐。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！