1、el-table-column 使用v-if判断是否渲染失效:
需要给v-if判断的列添加唯一的key作为标识
2、render-header的样式通过class设置不生效:
使用render设置的class样式style中不能添加scope
3、子组件取另一个子组件的值:
this.$parent.$refs['child']
4、一个el-tab中页签组件中引入一个新的el-tab后,导致页面卡死:
使用<el-row><el-col :span="24"><el-tab></el-tab></el-col></el-row>包装el-tab即可。
5、vue点击空白区域隐藏div区域下拉列表:
通过自定义指令
① 在div层添加v-clickoutside="hideToggle",其中hideToggle表示div层的v-if的是否显示标识
② 在script添加clickoutside定义,并且与data()和method()同层添加directives: { clickoutside }注册
const clickoutside = {
// 初始化指令
bind (el, binding, vnode) {
function documentHandler (e) {
// 这里判断点击的元素是否是本身,是本身,则返回
if (el.contains(e.target)) {
return false
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
binding.value(e)
}
}
// 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
},
update () { },
unbind (el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
},
}
6、一个输入框修改触发另一个输入框的校验
this.$refs.dialogFrom.validateField('hour')
7、el-select单选框切换为多选框清空数值后,数据仍显示在输入框控件上,导致多选框显示无匹配数据
给单选框和多选框的el-select代码段各加一个能唯一标识的key,使vue底层能通过key辨识是单选/多选组件,解决由单选切到多选清空数据失败的问题