佛山企业网站制作,韩国seocaso,中式风格装修效果图,网站备案一个主体1、form 下面只有一个 input 时回车键刷新页面
原因是触发了表单默认的提交行为#xff0c;给el-form 加上submit.native.prevent就行了。
el-form inline submit.native.preventel-form-item label订单号el-inputv-modelquery.order…1、form 下面只有一个 input 时回车键刷新页面
原因是触发了表单默认的提交行为给el-form 加上submit.native.prevent就行了。
el-form inline submit.native.preventel-form-item label订单号el-inputv-modelquery.orderNo:placeholder输入订单号查询clearablekeyup.enter.nativeenterInput//el-form-item
/el-form
2、表格固定列最后一行显示不全 这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的出现了固定列高度小于表格高度所以造成最后一行被遮挡
// 设置全局
.el-table__fixed-right {height: 100% !important;
}
3、气泡确认框文档里的confirm事件不生效
版本element-ui: 2.13.2 vue: 2.6.10
// 将confirm改为onConfirm
onConfirmonDeleteOrder(row.id)
4、输入框用正则限制但绑定值未更新
看到项目里有下面这么一段代码
el-input v-modelform.retailMinOrder placeholder请输入 onkeyupvaluevalue.replace(/[^\d.]/g,)
/
这样做虽然输入框的显示是正确的但绑定的值是没有更新的将 onkeyup 改为 oninput 即可。
PS输入中文后 v-model 会失效下面的方式更好一点
el-input v-modelform.retailMinOrder placeholder请输入 keyup.nativeform.retailMinOrderform.retailMinOrder.replace(/[^\d.]/g,)
/
5、去除typenumber输入框聚焦时的上下箭头 /* 设置全局 */
.clear-number-input.el-input::-webkit-outer-spin-button,
.clear-number-input.el-input::-webkit-inner-spin-button {margin: 0;-webkit-appearance: none !important;
}
.clear-number-input.el-input input[typenumber]::-webkit-outer-spin-button,
.clear-number-input.el-input input[typenumber]::-webkit-inner-spin-button {margin: 0;-webkit-appearance: none !important;
}
.clear-number-input.el-input {-moz-appearance: textfield;
}
.clear-number-input.el-input input[typenumber] {-moz-appearance: textfield;
}
el-input typenumber classclear-number-input /
6、只校验表单其中一个字段
在一些用户注册场景中提交整个表单前有时候会做一些单独字段的校验例如发送手机验证码发送时只需要校验手机号码这个字段可以这样做
this.$refs[form].validateField(mobile, valid {if (valid) {// 发送验证码}
})
如果需要多个参数将参数改为数组形式即可。
7、弹窗重新打开时表单上次的校验信息未清除
有人会在open时在$nextTick里重置表单也可以在关闭时进行重置。
el-dialog closeonCloseel-form refform/el-form
/el-dialog// 弹窗关闭时重置表单
onClose() {this.$refs[form].resetFields()
}
8、表头与内容错位
用下面这个办法
// 全局设置
.el-table--scrollable-y .el-table__body-wrapper {overflow-y: overlay !important;
}
9、表单多级数据结构校验问题
el-form :modelformel-form-item label部门 propdept/el-form-itemel-form-item label姓名 propuser.name/el-form-item
/el-form
rules: {user.name: [{ required: true, message: 姓名不能为空, trigger: blur }]
}
10、表格跨分页多选
看到项目里有小伙伴手动添加代码去处理这个问题其实根据文档只需加上row-key和reserve-selection即可。
el-table row-keyidel-table-column typeselection reserve-selection/el-table-column
/el-table
11、根据条件高亮行并去除默认hover颜色
el-table :row-class-nametableRowClassName
/el-tabletableRowClassName({ row }) {return row.status 2 ? highlight :
}// 设置全局
.el-table .highlight {background-color: #b6e8fe;:hover td {background-color: initial !important;}td {background-color: initial !important;}
}
12、表单不想显示label但又想显示必填星号怎么办
// label给个空格即可
el-formel-tableel-table-column label名称templateel-form-item label el-input placeholder名称不能为空 //el-form-item/template/el-table-column/el-table
/el-form
13、table 内嵌 input 调用 focus 方法无效
el-tableel-table-column label名称templateel-input refinputRef //template/el-table-column
/el-table// 无效
this.$refs[inputRef].focus()
this.$refs[inputRef][0].focus()
this.$refs[inputRef].$el.children[0].focus()// 有效
el-input idinputRef /
document.getElementById(inputRef).focus()
14、表格内容超出省略
看到有小伙伴在代码里自己手动去添加CSS来实现害又是一个不看文档的反面例子其实只要加个show-overflow-tooltip就可以了还自带tooltip效果不香吗
el-table-column label客户名称 propcustomerName show-overflow-tooltip
/el-table-column
15、el-tree 展开/收起所有节点
el-tree reftree/el-treeexpandTree(expand true) {const nodes this.$refs[tree].store._getAllNodes()nodes.forEach(node {node.expanded expand})
}
16、el-popover 位置偏移问题
事情起因el-popover 里的内容是动态获取的所以刚打开时位置正确此时内容为空等到获取数据渲染后 el-popover 内容盒子大小发生变化从而造成位置偏移。
解决办法通过源码知道 el-popover 里有个 updatePopper 方法用于更新位置文档里没有所以只需在获取数据后重新 updatePopper 就可以了。
el-popover refpopover placementleft triggerclick
/el-popover// 获取数据后
this.$nextTick(() {this.$refs[popover].updatePopper()
})
17、el-dialog 的 destroy-on-close 属性设置无效
destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在没有被销毁。
解决办法在 el-dialog 上添加 v-if。
el-dialog :visible.syncvisible v-ifvisible destroy-on-close
/el-dialog
18、el-cascader 选择后需要点击空白处才能关闭
级联选择器在设置为可选任意一级时选定某个选项时需要手动点击空白处才能关闭。
解决办法可在 change 事件触发时将其关闭。
el-cascaderrefcascaderchangeonChange
/onChange() {this.$refs[cascader].dropDownVisible false
}
19、使用图片查看器
el-image 组件是自带图片预览功能的传入 preview-src-list 即可。但有时候不用 image 组件但又想预览大图怎么办例如点击一个按钮时弹出一个图片查看器
答案是使用 el-image-viewer文档里并没有这个组件但通过查看源码知道该组件正是 el-image 里预览图片所用的。
templatedivel-button clickopen打开图片预览/el-buttonel-image-viewerv-ifshow:on-closeonClose:url-listurls:initial-indexinitialIndex//div
/templatescript
import ElImageViewer from element-ui/packages/image/src/image-viewerexport default {components: {ElImageViewer},data() {return {show: false,urls: [https://img0.baidu.com/it/u391928341,1475664833fm26fmtautogp0.jpg],initialIndex: 0}},methods: {open() {this.show true},onClose() {this.show false}}
}
/script
