vue+element-ui开发中的相关问题（持续更新）

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辨识是单选/多选组件，解决由单选切到多选清空数据失败的问题