今天在用elementUI 的时候，table的头部是有颜色小格子的，那么就需要去自定义table的头部，table组件提供了render-header函数，颜色格子一定要用到标签，发现直接return 出去带有标签的字符串是解析不了的，搜了下，发现需要用到createElement <el-table>表头内插入 HTML 标签？跟着这个issues尝试了createElement 的使用，
第一个参数为一个 HTML 标签字符串，组件选项对象，后面两个参数为数据或者对象，两个顺序可以随意，
如果是一个HTML标签的话，
{
attrs:{
class:"beauty",
style:""
}
}
参数为字符串的话会将后面的{}设置覆盖掉，字符串就是innerText属性。
domProps: {
innerHTML: 'dddd'
},
最后一个参数为数组，里面存放的就是子组件
jsx的优势：
今天看了elementUI的pagination组件发现里面的事件写法很奇怪，on-click={ this.$parent.prev }>是这么写的，在react中是驼峰命名法，于是查阅vue古方文档里面的render函数章节，发现里面并没有on-click这种写法，还有一点比较奇怪，render函数没有返回vnode组件（就是没有使用createElement），而是直接返回了HTML字符串。
pagination.js
render(h) {
let template = <div class='el-pagination'></div>;
const layout = this.layout || '';
if (!layout) return;
const TEMPLATE_MAP = {
prev: <prev></prev>,
jumper: <jumper></jumper>,
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
next: <next></next>,
sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
slot: <my-slot></my-slot>,
total: <total></total>
};
const components = layout.split(',').map((item) => item.trim());
const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
let haveRightWrapper = false;
if (this.small) {
template.data.class += ' el-pagination--small';
}
components.forEach(compo => {
if (compo === '->') {
haveRightWrapper = true;
return;
}
if (!haveRightWrapper) {
template.children.push(TEMPLATE_MAP[compo]);
} else {
rightWrapper.children.push(TEMPLATE_MAP[compo]);
}
});
if (haveRightWrapper) {
template.children.push(rightWrapper);
}
return template;
},
里面的子组件也是直接返回HTML字符串的
原来这是jsx的语法，使用了babel-plugin-transform-vue-jsx去支持jsx语法，在这个库中看到
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
他事件绑定的方式是用驼峰命名的onClick我现在用的element的版本是1.2.8，查看了最新的1.4依旧用的on-click方式Vue jsx 和 React jsx 的一些不同点这篇文章说vue2.1开始支持驼峰的。
jsx语法的优势：
- 不用每次都createElement 返回vnode,直接使用正常的HTML嵌套的格式，组件嵌套也是如此，
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
- 事件属性直接写在标签上，不用在配置参数里配置各个属性和事件，上面就是直接写的。
createElement 的属性和事件配置：
on: {
click: this.clickHandler
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
element-ui 中哪些使用了jsx语法：
vue : pagination tabs dropdown scrollbar upload
js: col row tooltip
