Element: vue 不能render 表格组件

[GaryChangCN]

ElementUI version

1.0.0-rc.8

OS/Browers version

windows/Chrome 53

Vue version

2.0.5

Vue loader

9.4.0

遇到情况

重新npm install后，忘记了之前用的都是什么版本，但是之前是没问题的
table-body不能render，
报错提示为

Vue warn Error when rendering component <table-body>
_.vm._h is not a function

测试例子为官方的table例子 带有inline-template

测试删除带有inline-template的` 后运行正常。

[JxJayden]

同遇到这个问题了 1.0.0 版本也不行……

[QingWei-Li]

vue-loader 9.9.0 一些变动（去掉了 with）导致原来的代码逻辑受到影响，已经修正 https://github.com/ElemeFE/element/pull/1018

[QingWei-Li]

建议各位目前将 vue-loader 锁定在 9.8.0 同时 vue-template-es2015-compiler 锁定在 1.1.0

[GaryChangCN]

@QingWei-Li 实测用npm install 最新版本 #1018 修改内容并没有变 导致还是不能用0.99的ｖｕｅ－ｌｏａｄｅｒ

[QingWei-Li]

因为还没发布呀

[chachaxw]

这是一个大 bug，自定义表格内容后，无法 render 表格

[chachaxw]

@GaryChangCN 你解决这个问题了吗？这个问题很严重啊

[QingWei-Li]

@GaryChangCN @chachaxw
因为 vue-loader 新加的 feature 去掉了 with，但是 Table 里自定义模板依赖 with 这个特性，已经在 #1018 里修复了这个问题，周三发布新版。

目前的解决方案是锁定 vue-loader 9.8.0 和 vue-template-es2015-compiler 1.1.0 的版本

{
  "vue-loader": "9.8.0",
  "vue-template-es2015-compiler": "1.1.0"
}

[dcy0701]

@GaryChangCN 解决了~

[geekdada]

@QingWei-Li 1.0.1 的 inline-template 上下文和之前的不一样，原来的 _self 相当于现在的 _self.$parent

[QingWei-Li]

@geekdada

现在不需要 _self 访问当前上下文，因为目前的返回的上下文就是当前的。抱歉忘记改了 _self 了

[QingWei-Li]

@geekdada 感觉也不需要 _self 了，你看下如果觉得是个 bug，那么提个 issue 我考虑下下一版修，否则我改文档好了

[geekdada]

在不做修改的情况下，原来 inline-template 里的方法调用全部都 undefined 了，看了 https://github.com/vuejs/vue-template-es2015-compiler/issues/3 这里我又把 with 弄了回来…

[geekdada]

貌似是 data 访问到了，methods 没法访问到

[QingWei-Li]

@geekdada 之前的 _self 是给 jsx 用的，如果你在模板里写，按照之前 with 的处理逻辑，内部的上下文里（column 组件）找不到就会往上层上下文去找，所以之前的写法也不需要你写 _self。

所以为了向前兼容，我下一版把 _self 也指成当前上下文好了。

[geekdada]

准确应该这么说。我在外层 vm 定义了 methods.foo，在 inline-template 里 @click="foo" 原来是没问题的，1.0.1 里报 undefined。

[QingWei-Li]

@geekdada 我想了下，考虑错了 _self 指的还是当前上下文。你把 vue-loader, vue-template-es2015-compiler 升级到最新的了么, 9.9.5 和 1.2.2 ？我刚才测试了没有问题，无论是直接访问还是用 _self，如果还是有 bug，麻烦重新开个 issue，附上可重现的 demo

[cmlily8294]

Hi,@QingWei-Li,我今天更新1.0.1之后也发现了和@geekdada同样的问题

<el-table-column
   label="操作"
   inline-template
   width="200%">
   <div>
      <el-button type="warning" @click.native.prevent="openEditDialog(row)">修改</el-button>
      <el-button type="primary" @click.native.prevent="openViewDialog">查看</el-button>
   </div>
</el-table-column>

在当前上下文的vm里没有

在vm的$parent里找到了

[QingWei-Li]

@cmlily8294 我这没问题，可否提供个 repo？

[cmlily8294]

@QingWei-Li嗯，我这边为了封装和后端交互，将el-table作为子组件，使用的是我封装的组件，所以我截图的例子里的_vm获取到的是我封装的组件的上下文，并不是当前上下文。但在1.0.1之前的版本是当前的上下文
https://github.com/itouzigithub/itz-element/blob/master/examples/app.vue

[QingWei-Li]

@cmlily8294 那应该说成是 table 组件所在的上下文才对，没办法 vue-loader 把 with 去掉后就不能利用 with 的特性了（其实可以加回来，stripWith 改为 false）

[QingWei-Li]

@cmlily8294 @geekdada 抱歉，我的失误，已经修复在 https://github.com/ElemeFE/element/pull/1161

现在增加了个 context 属性，可以自己指定上下文。 @cmlily8294 你的问题就只需要配置下 :context="_self" 就好了，具体看文档描述

[geekdada]

今天太忙没时间看，感谢～

[cmlily8294]

非常感谢！！！@QingWei-Li

[HerringtonDarkholme]

@cmlily8294 类似这样的代码

new Vue({
  data: {outer: 'string'}
  template:`<test inline-template>
   <span>{{outer}} is not available {{inner}} is available</span>
</test>`,
  components: {
    test: {data: {inner: 'string'}}
  }
})

在inline-template里是取不到任何外层vm的数据的。在stripWith为true的情况上述的discussion已经阐述。在false的情况，vue在render的时候会包装一层_renderProxy，with(this)会屏蔽掉所有外层vm，只提供test component的数据。前提是，运行环境有原生Proxy存在。能否告知你运行的环境呢？

https://github.com/ElemeFE/element/blob/4ebdd6a6d4e47619bd4bf4cf27133f6f078e0a56/packages/table/src/table-body.js#L47 因为table-column的inline-template的渲染是Element控制的，这个函数给到的data数据没有经过Proxy。所以会造成渲染受stripWith影响。

I wonder how your code works before. Vue is going to implement scoped template, a similar feature like inline-template without user hacking. https://github.com/vuejs/vue/projects/3