vue中动态渲染元素或者标签(不通过v-if,不影响子元素)

需求

在变量isHaveForm为true时，元素el-form标签渲染，为false时，只渲染el-form中的子元素，如果直接用v-if控制达不到要求。

1. vue中动态渲染元素或者标签
2. 需求转换成：删除元素，而不删除其子元素

自定义指令实现

// html 代码
    <el-form ref="listQuery" 
    v-el-remove-myself-html="isHaveForm" 
    :model="listQuery" :inline="true">
         <el-form-item> 子元素1 </el-form-item>
         <el-form-item> 子元素2 </el-form-item>
         ……
	</el-form>

// 组件的私有指令
  directives: {
    'el-remove-myself-html': {
      inserted(el, binding, vm) {
        if (binding.value) return
        while (el.firstChild) {
          el.parentNode.insertBefore(el.firstChild, el)
        }
        el.parentNode.removeChild(el)
      }
    }
  },