大佬们 vue 这段动态渲染的代码为什么不行

2020-04-09 15:14:48 +08:00
 Ritter

用了 elementui 组件 想动态渲染一部分 html 片段 但是为什么没有数据 新手求教 谢谢

3306 次点击
所在节点    Vue.js
34 条回复
Ritter
2020-04-09 16:11:45 +08:00
@rabbbit 大佬牛逼 再问一下 为什么我直接循环数据又可以显示出来 像这种传递给另一个组件的 props 的却不行
rabbbit
2020-04-09 16:16:36 +08:00
@Ritter 看不懂,写个完整点的例子发过来看看.
rain0002009
2020-04-09 16:17:55 +08:00
好了 破案了
Ritter
2020-04-09 16:23:03 +08:00
例如我把这个 html 改成
````
const tipTableHtml = '<div>
<span v-for="d in tableData">{{ d.name }}</span>
</div>'
```
这样是直接可以看到渲染后的数据的
还有就是我这个 formatter 函数需要返回一个 html 字符串 但是返回的字符串在$nextTick 的回调中 这要怎么办
Ritter
2020-04-09 16:24:16 +08:00
@rabbbit 忘了 @
rabbbit
2020-04-09 16:40:46 +08:00
@Ritter
element-table 里面有默认值,他会先用默认值去渲染 Dom.
你可以试下下面这个例子, console 输出的还是默认值:

const tipComponent = new tipComponentConstruct().$mount();
tipComponent.tableData[0].data = 'xxx' // 注意这里
tipComponent.$nextTick(() => {
...const html = tipComponent.$el.outerHTML
...console.log(html)
})

至于取 nextTick 里的值, 可以用 watch

Vue.extend({
...data() {
......return {
.........html: null
......}
...}
...watch: {
......html(value) {console.log(value)}
...}
})
a.$nextTick(() => {
...tipComponent.html = a.$el.outerHTML
})
rabbbit
2020-04-09 16:42:55 +08:00
const tipComponent = new tipComponentConstruct().$mount();
tipComponent.tableData[0].data = 'xxx'
console.log(tipComponent.$el.outerHTML) // 漏了一行
tipComponent.$nextTick(() => {
...const html = tipComponent.$el.outerHTML
...console.log(html)
})
Ritter
2020-04-09 16:52:51 +08:00
@rabbbit 明白了 谢谢大佬
okampfer
2020-04-09 18:17:58 +08:00
element-ui 的组件同样需要 vue-loader 在打包阶段处理，echarts tooltip 格式化函数返回的 html 片段运行时才会被渲染，所以无法被处理，如果里面用了 element-ui 的组件，应该会被原样输出。

如果我的想法有错，还请各位前端大佬指正。
zhouyg
2020-04-10 12:01:57 +08:00
直接赋值 el-table 是不会被编译的，只会当作成自定义 html 标签
shenzhimin
2020-04-10 12:04:33 +08:00
@rabbbit 应该不需要 nexttick 的，element-table 里面有默认值是在没有传参数的时候 才会用到，应该不存在先用默认值渲染的说法
可以看看 @rain0002009 上面的截图
tikazyq
2020-04-10 12:07:53 +08:00
你应该避免这么做
ourFEer
2020-04-10 17:54:17 +08:00
大佬,挠头 * n
Joseph0717
2020-04-13 17:06:33 +08:00
铁铁，别这样，非要这样可以这样，dom=`<html></html>`,注意不双是引号

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/660817

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX