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

渲染

elementui

Vue

动态

34 条回复 • 2020-04-13 17:06:33 +08:00

1

Ritter

OP

2020-04-09 15:18:46 +08:00

挠头

2

Ritter

OP

2020-04-09 15:40:20 +08:00

挠头*2

3

wunonglin

2020-04-09 15:41:26 +08:00

1

看着你的代码我也只能挠头*3

4

also24

2020-04-09 15:42:41 +08:00

Vue.extend( options ) 那一句，data() 上的 warning 是怎么回事儿？

5

Ritter

OP

2020-04-09 15:42:49 +08:00

@wunonglin 555

6

Ritter

OP

2020-04-09 15:44:28 +08:00

@also24 哪个 warning 有红线的只是 eslint 的问题

7

qq316107934

2020-04-09 15:46:36 +08:00

1

这...都用了 vue 了为啥还要直接操作 DOM

8

also24

2020-04-09 15:46:54 +08:00

@Ritter #6
你和我说的是同一行嘛？我说的是 data() 上的 warning 那里。
虽然我不会写前端，但是看文档的话，难道不是 data: function () 这样写么？

https://cn.vuejs.org/v2/api/index.html#Vue-extend

9

jjianwen68

2020-04-09 15:48:39 +08:00

转换思想，用 vue 了就不要按 jquery 那套了吧

10

murmur

2020-04-09 15:51:46 +08:00

template 部分有语法错误么，我这看似乎是 column 都没渲染出来啊，表头呢

11

murmur

2020-04-09 15:52:20 +08:00

@also24 es6 语法了解下，data()就是 function

12

Ritter

OP

2020-04-09 15:53:27 +08:00

@also24 data()上面没有 warning 这个是 es6 的语法

13

Ritter

OP

2020-04-09 15:55:26 +08:00

@qq316107934
@jjianwen68
因为在 echarts tooltip 格式化函数只能返回 html 片段我又想在里面用 elementui 组件

14

rain0002009

2020-04-09 15:57:21 +08:00

您瞧瞧您这代码和官网例子的区别

15

Ritter

OP

2020-04-09 15:59:34 +08:00

@murmur 应该没有看类名 el-table 组件已经被编译了但是数据没有填进去

16

Ritter

OP

2020-04-09 16:00:13 +08:00

@rain0002009 图裂了老哥

17

rabbbit

2020-04-09 16:00:23 +08:00

tipComponent.$nextTick(() => {
...const html = tipComponent.$el.outerHTML
...console.log(html)
})

18

also24

2020-04-09 16:02:10 +08:00

@murmur #11
@Ritter #12
soga，js 果然博大精深

14 楼贴的图是
https://cn.vuejs.org/v2/api/index.html#vm-mount

19

rabbbit

2020-04-09 16:02:14 +08:00

直接取当然没变化, Vue 不会立刻修改 Dom.

20

shintendo

2020-04-09 16:08:07 +08:00

17L 正解。
话说你这用法也实在诡异

21

Ritter

OP

2020-04-09 16:11:45 +08:00

@rabbbit 大佬牛逼再问一下为什么我直接循环数据又可以显示出来像这种传递给另一个组件的 props 的却不行

22

rabbbit

2020-04-09 16:16:36 +08:00

1

@Ritter 看不懂,写个完整点的例子发过来看看.

23

rain0002009

2020-04-09 16:17:55 +08:00

好了破案了

24

Ritter

OP

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 的回调中这要怎么办

25

Ritter

OP

2020-04-09 16:24:16 +08:00

@rabbbit 忘了 @

26

rabbbit

2020-04-09 16:40:46 +08:00

1

@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
})

27

rabbbit

2020-04-09 16:42:55 +08:00

1

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)
})

28

Ritter

OP

2020-04-09 16:52:51 +08:00

@rabbbit 明白了谢谢大佬