最近收到这么一个需求：
在Element后台表格中，某一列需要展示 文本+超链接的内容。
期望得到的格式如下：
1
2
3
4
| <div>
<span>文本内容</span>
<a href="自定义跳转链接" target="_blank">查看</a>
</div>
|
因为封装的列中已经给了h()了（相当于vue的createElement），所以很快写了一段生成方法：
1
2
3
4
| h("div", {}, [
h("span", "文本内容"),
h("a", { href: "自定义跳转链接", target: "_blank" }, "查看")
])
|
结果一看生成的结果：
1
2
3
4
| <div>
<span>文本内容</span>
<a>查看</a>
</div>
|
href和target并没有被生成，于是又尝试了下其他属性：
1
2
3
4
| h("div", {}, [
h("span", "文本内容"),
h("a", { class: "test" }, "查看")
])
|
1
2
3
4
| <div>
<span>文本内容</span>
<a class="test">查看</a>
</div>
|
好家伙，咋href和target不行呢？
在之后找答案的过程中无意间看到了别人的一段代码：
1
2
3
4
5
6
| createElement('a', {
attrs: {
name: headingId,
href: '#' + headingId
}
}, this.$slots.default)
|
于是把代码改为了：
1
2
3
4
| h("div", {}, [
h("span", "文本内容"),
h("a", { attrs: { href: "自定义跳转链接", target: "_blank" } }, "查看")
])
|
好家伙，对了，太对了=_=。
