厦门建设银行网站,郑州市主城区,怎么通过所有的网站推广广告,网络推广平台在哪里有需求#xff1a;el-form-item添加el-select#xff0c;并且el-select可选择可搜索可输入新内容#xff0c;并且和其他的el-input做联动#xff0c;如果是选择#xff0c;那么el-input自动回填数据并且不可编辑#xff0c;如果el-select输入新的内容#xff0c;那么el-in… 需求el-form-item添加el-select并且el-select可选择可搜索可输入新内容并且和其他的el-input做联动如果是选择那么el-input自动回填数据并且不可编辑如果el-select输入新的内容那么el-input也要输入新内容。 实现功能 可以搜索、选择、新增 1.效果 2.主要代码讲解 filterable搜索 allow-create允许用户创建新的内容 default-first-option用户按下回车默认展示第一个匹配项 blur失去焦点事件 change选择值发生改变事件 visible-change下拉框出现或者隐藏触发 refselectName必须要设置ref来获取到选择的实例 这里如果是和我一样遍历出来的选择框那么需要再传递一个index el-select:disablednameDisabledv-modelitem.nameplaceholder请选择名称filterablerefselectNameallow-createblurnameBlur($event, index)visible-changevisibleNameChange($event, index)changenameChange($event, index)default-first-optionel-option v-foritem in equipNameOptions :keyitem.id :labelitem.name :valueitem.name /el-option/el-select 2.1失去焦点 this.$set向响应式对象添加一个属性和值这个就是在this.formTerminal中添加name属性和值值就是输入框的内容 nameBlur(e, index) {let value e.target.value; // 输入框值if (value) {// this.$set向响应式对象添加一个属性和值这个就是在this.formTerminal中添加name属性和值值就是输入框的内容this.$set(this.formTerminal.attr[index], name, value);this.nameChange(value, index);}},
2.2值改变事件 从匹配的选项中查找输入的内容是否相同如果不相同则让性别重新输入并且取消禁用 nameChange(val, index) {const foundItem this.equipNameOptions.find((item) item.name val);this.isNameSelect foundItem ? true : false;this.formTerminal.attr[index].age foundItem ? foundItem.age : ;},
2.3 下拉框出现或者隐藏触发 必须要写这个这个代码就是在下拉展开和关闭的时候触发失去焦点的事件不然关闭和展开的时候不会触发失去焦点事件导致错误 visibleNameChange(val, i) {// console.log(i, this.$refs.selectName[i].selectedLabel, 下拉数据);if (!val) {let input this.$refs.selectName[i].$children[0].$refs.input;input.blur();}}
3.完整代码
templatediv stylemargin-top: 40pxel-form classterminal-form refaddOrEditSensorForm :inlinetrue :modelformTerminal label-width95pxdiv classterminal-box v-for(item, index) in formTerminal.attr :keyindexel-form-itemlabel名称:propattr. index .name:rules{required: true,message: 名称不能为空,trigger: blur}el-select:disablednameDisabledv-modelitem.nameplaceholder请选择名称filterablerefselectNameallow-createblurnameBlur($event, index)visible-changevisibleNameChange($event, index)changenameChange($event, index)default-first-optionel-option v-foritem in equipNameOptions :keyitem.id :labelitem.name :valueitem.name /el-option/el-select/el-form-itemel-form-item label年龄 propageel-input v-modelitem.age placeholder请输入终端名称 :disabledisNameSelect/el-input/el-form-item/div/el-form/div
/templatescript
export default {data() {return {nameDisabled: false,formTerminal: {attr: [{name: ,age: }]},equipNameOptions: [{id: 1,name: 张三,age: 18},{id: 2,name: 李四,age: 32}],isNameSelect: false};},mounted() {},methods: {nameBlur(e, index) {let value e.target.value; // 输入框值if (value) {// this.$set向响应式对象添加一个属性和值这个就是在this.formTerminal中添加name属性和值值就是输入框的内容this.$set(this.formTerminal.attr[index], name, value);this.nameChange(value, index);}},nameChange(val, index) {const foundItem this.equipNameOptions.find((item) item.name val);this.isNameSelect foundItem ? true : false;this.formTerminal.attr[index].age foundItem ? foundItem.age : ;},visibleNameChange(val, i) {// console.log(i, this.$refs.selectName[i].selectedLabel, 下拉数据);if (!val) {let input this.$refs.selectName[i].$children[0].$refs.input;input.blur();}}}
};
/scriptstyle langscss scoped/style文章到此结束希望对你有所帮助~
