tl;dr:
给定一个 VueJSVNode
对象,如何获取渲染后生成的 HTML 元素?
e.g.:
> temp1
VNode {tag: "h1", data: undefined, children: Array(1), text: undefined, elm: undefined, …}
> temp1.children[0]
VNode {tag: undefined, data: undefined, children: undefined, text: "Test", elm: undefined, …}
> doSomething(temp1)
<h1>Test</h1>
Goal
我正在尝试围绕以下内容构建一个小型 VueJS 包装器数据表网图书馆。
为了在我的标记中模仿 HTML 表的行为,我想要如下所示的内容:
<datatable>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<datatable-row v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.salary }}</td>
</datatable-row>
</tbody>
</datatable>
到目前为止我做了什么
我已经开始按如下方式实施:
数据表.vue
<template>
<table ref="table" class="display table table-striped" cellspacing="0" width="100%">
<slot></slot>
</table>
</template>
<script>
/* global $ */
export default {
data: () => ({
instance: null
}),
mounted() {
this.instance = $(this.$refs.table).dataTable();
this.$el.addEventListener("dt.row_added", function(e) {
this.addRow(e.detail);
});
},
methods: {
addRow(row) {
// TODO <-----
console.log(row);
}
}
};
</script>
数据表行.vue
<script>
/* global CustomEvent */
export default {
mounted() {
this.$nextTick(() => {
this.$el.dispatchEvent(new CustomEvent("dt.row_added", {
bubbles: true,
detail: this.$slots.default.filter(col => col.tag === "td")
}));
});
},
render() { return ""; }
};
目前的作用:
- 当页面加载时,DataTable 被初始化。因此列标题的格式正确,我在左下角看到“显示 0 到 0 个条目”
- The
CustomEvent
能够冒泡过去<tbody>
并被抓住DataTable
元素成功地(绕过VueJS中无法监听插槽上事件的限制)
这是做什么的not do:
我的活动给了我一系列VNode
对象。有一个VNode
我行中的每列。 DataTables API 有一个addRow
可以像这样调用的函数:
this.instance.row.add(["col1", "col2", "col3"]);
就我而言,我希望 VNode 渲染得到的元素成为该数组中的元素。
var elems = [];
for (var i = 0; i < row.length; i++)
elems[i] = compile(row[i]);
this.instance.row.add(elems);
不幸的是这个compile
方法让我困惑。我尝试浏览 VueJS 文档,并尝试用谷歌搜索它,但没有任何结果。我尝试手动传递createElement
函数(传递给的参数render
方法)但这引发了错误。如何让 VueJS 渲染 VNode 而不将结果注入 DOM?