Article reference
http://www.cnblogs.com/bhaltair/p/6648946.html
At work, I used the table in iview for development, and found that a lot of complex td content needs to be implemented using the createElement function (virtual DOM). The development process is very cumbersome, and I need to be very familiar with the API of the createElement method. The development workload, thought of using JSX syntax to achieve!
Build the environment:
1. Install the relevant babel plugins
cnpm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-es2015 --save-dev
2. Modify the .babelrc file
{
"presets": [
"es2015",
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx","transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
The following example is an example of directly copying the official website of iview. I use the JSX syntax implementation and the createElement method to achieve both. You can make a simple comparison.
<template>
<div>
<Table border :columns="columns7" :data="data6"></Table>
</div>
</template>
<script>
export default {
data () {
return {
columns7: [
{
title: 'name',
key: 'name',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.name)
]);
}
},
{
title: 'Operation',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'Check'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, 'delete')
]);
}
},
{
title: 'JSX',
key: 'address',
render: (h, params) => {
console.dir(params)
let aaa = false;
if (aaa) {
return (
<button> sdfadsfdsa </button>
)
} else {
return (
<div>
<i-button type="primary"> {this.buttonName} </i-button>
<br/>
<dropdown on-on-click={this.test}>
<a href="javascript:void(0)">
Drop-down menu
<icon type="arrow-down-b"></icon>
</a>
<dropdown-menu slot="list">
<dropdown-item>Donkey rolls</dropdown-item>
<dropdown-item>炸酱面</dropdown-item>
<dropdown-item disabled>豆汁儿</dropdown-item>
<dropdown-item>Ice candied haws</dropdown-item>
<dropdown-item divided>Peking Duck</dropdown-item>
</dropdown-menu>
</dropdown>
</div>
)
}
}
},
],
data6: [
{
name: 'Wang Xiaoming',
age: 18,
address: 'Shaoyaoju, Chaoyang District, Beijing'
},
{
name: 'Zhang Xiaogang',
age: 25,
address: 'Xierqi, Haidian District, Beijing'
},
{
name: 'Li Xiaohong',
age: 30,
address: 'Century Avenue, Pudong New Area, Shanghai'
},
{
name: 'Zhou Xiaowei',
age: 26,
address: 'Shennan Avenue, Nanshan District, Shenzhen'
}
],
buttonName: "I am btn name"
}
},
methods: {
show (index) {
this.$Modal.info({
title: 'User Information',
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
},
test: function (){
alert("test");
}
}
}
</script>
The following points need to be paid attention to when developing with JSX:
1. There can only be one outermost node , and parallel outermost labels cannot appear at the same time (because createElementa can only create one dom node, and the rest are its child nodes)
2. You need to use "lowercase letters + dash" to refer to external components , such as i-button, dropdown-menu
3. If you need to import data data in the vue object, the syntax is {this.dataName} , such as {this.buttonName}
4、如果是希望引入事件，即on-“事件名称”，如果事件名称是驼峰命名，需要使用中划线代替，例如on-on-click，组件定义的是on-click事件，那么在jsx中需要使用on-on-click事件，第一个on相当于原生定义事件的方式。
5、事件的引入与变量的引入类似，{this.methodName}，例如：{this.test}