element中关于el-autocomplete和validate规则trigger/change之间的问题

代码

<el-form :model="purchaseForm" :rules="rules" ref="purchaseForm"><el-form-item label="批准文号" prop="purId"><el-autocompletepopper-class="my-autocomplete"v-model="purchaseForm.purId":fetch-suggestions="querySearch"placeholder="输入批准文号"prop="purId"><template slot-scope="{ item }"><div class="name">{{ item.value }}</div><span class="addr">{{ item.name }}</span></template></el-autocomplete></el-form-item><el-form-item><el-button type="primary" @click="submitCheck('purchaseForm')">确认</el-button></el-form-item></el-form>

<script>
export default {name: "Son2Pur",data() {var validateId = (rule, value, callback) => {if (!value) {return callback(new Error("批准文号(H/B/S+2位生产编号+6位数字)"));} else {callback();}};return {purchaseForm: {purId: "",},druginfo: [],rules: {purId: [{ validator: validateId, change: "blur" }],}};},mounted() {this.druginfo = this.loadAll();},methods: {submitCheck: function(formName) {this.$refs[formName].validate(valid => {if (valid) {this.$store.commit("activeAdd");this.$router.replace("/contral/son2purnext");} else {alert("请完整填写!!!");return false;}});},querySearch(queryString, cb) {var druginfo = this.druginfo;var results = queryString? druginfo.filter(this.createFilter(queryString)): druginfo;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return druginfo => {return (druginfo.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},loadAll: function() {return [{ value: "H20143140", name: "阿莫西林" },{ value: "H20023191", name: "布洛芬" },{ value: "H20173078", name: "头孢" },{ value: "H20034006", name: "阿奇霉素片" },{ value: "H45020401", name: "地塞米松片" },{ value: "H20033442", name: "红霉素胶囊" }];}}
};
</script>

问题

purId: [{ validator: validateId, change: "blur" }],

正常来说，这个规则里应该是触发器trigger，但配合el-autocomplete之后，应该改成change触发。

因为trigger触发方式判定是否失去焦点而change则更注重内容数据是否改变。

为trigger时

为change时

另外

el-autocomplete的loadAll函数中返回的数值必须是以value为查找的key，如果你改成其他称呼比如DrugId、id等都无法正常显示数据

loadAll: function() {return [{ value: "H20143140", name: "阿莫西林" },{ value: "H20023191", name: "布洛芬" },{ value: "H20173078", name: "头孢" },{ value: "H20034006", name: "阿奇霉素片" },{ value: "H45020401", name: "地塞米松片" },{ value: "H20033442", name: "红霉素胶囊" }];}

element中关于el-autocomplete和validate规则trigger/change之间的问题相关推荐

element中 el-input 中的 autocomplete 属性怎么使用，为什么不生效
element中 el-input 中的 autocomplete属性怎么使用想整体学一遍 element,学到 input 中看到了 autocomplete 这个属性,没有过多的介绍,我就自己试 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框基础用法由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
element中树形数据与懒加载实现全部展开和全部收起
element中属性懒加载数据 default-expand-all属性::是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效如果在表格头上加上一个按钮实现全部展开与收起类似如 ...
js去el的map_转：el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
C++中运算符重载需要遵循的规则
一.C++中运算符重载需要遵循的规则 1.并不是所有的运算符都可以重载.能够重载的运算符包括: + - * / % ^ & | ~ ! = < > += -= *= /= %= ^ ...
计算机网络有限制,计算机网络中软件限制策略的应用规则有哪些
计算机网络中软件限制策略的应用规则有哪些发布时间:2021-06-28 11:21:43 来源:亿速云阅读:64 作者:小新这篇文章将为大家详细讲解有关计算机网络中软件限制策略的应用规则有哪些, ...
美团公开外卖配送中的“预估到达时间”算法规则
9 月 10 日,美团称于近日收到了市场监管总局等部门关于算法的指导意见,邀请了不同相关方一起探讨配送时间的计算规则--通过骑手恳谈会收集意见,邀请外部专家学者讨论算法的调整方向和细节,并在部分城市进 ...
网页制作中规范使用DIV+CSS命名规则（转）
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...

element中关于el-autocomplete和validate规则trigger/change之间的问题

代码

问题

另外

element中关于el-autocomplete和validate规则trigger/change之间的问题相关推荐

最新文章

热门文章