react的jsx语法很好用，但是vue的jsx语法就不是很好用了。
vue的jsx语法不能实现双向数据绑定以及各种比如v-for指令，只能自己用代码用另一种方式实现出来。着实是费了一些功夫，现在来说一下我使用vue的jsx语法过程中用到的东西吧，当个记录，也方便以后查看。
因为我的项目用得是iview的框架，所以这里用的是iview的table组件+vue2.0+jsx
传送门：iview:https://www.iviewui.com/components/table
vue的jsx语法：https://cn.vuejs.org/v2/guide/render-function.html#ad
以下是代码：
1 //以下是table
2 <div style="width:100%;">
3 <i-table border :columns="columns2" :data="data2" style="width:100%;"></i-table>
4 </div>
5
6
7 //以下是data数据
8
9 export default{
10 data(){
11 return {
12 columns2: [
13 {
14 title: "编号",
15 key: "num",
16 align: "center",
17 width: 150,
18 render: (h, params) => {
19 return h("div", [h("strong", params.index + 1)]);
20 }
21 },
22 {
23 title: "原文本",
24 key: "OriginalText",
25 align: "center",
26 render: (h, params) => {
27 console.log(params.row);
28 const _self = this;
29 const arr = [];
30 debugger;
31 console.log(_self.data2[params.index].OriginalText, "OriginalText");
32
33 _self.data2[params.index].OriginalText.forEach((item, index) => {
34 arr.push(
35 h("Input", {
36 props: {
37 value: item.OriginalText
38 },
39 style: {
40 margin: "5px 0"
41 },
42 on: {
43 input: value => {
44 debugger;
45 console.log(item.OriginalText);
46 params.row.OriginalText[index].OriginalText = value;
47 console.log(value);
48 _self.data2[params.index] = params.row;
49 _self.n++;
50 console.log(_self.data2);
51 }
52 }
53 })
54 );
55 });
56 return h(
57 "Row",
58 {
59 style: {
60 padding: "10px 0"
61 }
62 },
63 [
64 h(
65 "i-col",
66 {
67 attrs: {
68 span: 20
69 }
70 },
71 arr
72 ),
73 h(
74 "i-col",
75 {
76 attrs: {
77 span: 4
78 },
79 style: {
80 marginTop: "8px"
81 }
82 },
83 [
84 h(
85 "Button",
86 {
87 attrs: {
88 type: "ghost",
89 size: "small"
90 },
91 style: {
92 border: "none"
93 },
94 on: {
95 click: function() {
96 debugger;
97 // console.log(_self.data2[params.index].OriginalText,'_self.data2[params.index].OriginalText')
98 _self.data2[params.index].OriginalText.push({
99 OriginalText: ""
100 });
101 _self.n++;
102 }
103 }
104 },
105 [
106 h("Icon", {
107 props: {
108 type: "plus-circled"
109 },
110 style: {
111 fontSize: "24px",
112 color: "#39f"
113 }
114 })
115 ]
116 )
117 ]
118 )
119 ]
120 );
121 }
122 },
123 {
124 title: "替换文本",
125 key: "replaceText",
126 align: "center",
127 render: (h, params) => {
128 console.log(params.row);
129 const _self = this;
130 const arr = [];
131
132 _self.data2[params.index].replaceText.forEach((item, index) => {
133 arr.push(
134 h("Input", {
135 props: {
136 value: item.replaceText
137 },
138 style: {
139 margin: "5px 0"
140 },
141 on: {
142 input: value => {
143 // debugger;
144 console.log(item.replaceText);
145 params.row.replaceText[index] = value;
146 console.log(value);
147 _self.data2[params.index] = params.row;
148 console.log(_self.data2);
149 _self.n++;
150 }
151 }
152 })
153 );
154 });
155 return h(
156 "Row",
157 {
158 style: {
159 padding: "10px 0"
160 }
161 },
162 [
163 h(
164 "i-col",
165 {
166 attrs: {
167 span: 20
168 }
169 },
170 arr
171 ),
172 h(
173 "i-col",
174 {
175 attrs: {
176 span: 4
177 },
178 style: {
179 marginTop: "8px"
180 }
181 },
182 [
183 h(
184 "Button",
185 {
186 attrs: {
187 type: "ghost",
188 size: "small"
189 },
190 style: {
191 border: "none"
192 },
193 on: {
194 click: function() {
195 debugger;
196 _self.data2[params.index].replaceText.push({
197 replaceText: ""
198 });
199 console.log(_self.data2);
200 }
201 }
202 },
203 [
204 h("Icon", {
205 props: {
206 type: "plus-circled"
207 },
208 style: {
209 fontSize: "24px",
210 color: "#39f"
211 }
212 })
213 ]
214 )
215 ]
216 )
217 ]
218 );
219 }
220 },
221 {
222 title: "操作",
223 key: "action",
224 width: 200,
225 align: "center",
226 render: (h, params) => {
227 return h("div", [
228 h(
229 "Button",
230 {
231 props: {
232 type: "error",
233 size: "small"
234 },
235 style: {
236 marginRight: "5px"
237 },
238 on: {
239 click: () => {
240 //this.delete(params.index);
241 }
242 }
243 },
244 "删除"
245 )
246 ]);
247 }
248 }
249 ],
250 data2: [
251 {
252 OriginalText: [
253 { OriginalText: "这是原始文本1" },
254 { OriginalText: "这是原始文本2" }
255 ],
256 replaceText: [
257 { replaceText: "这是替换文本1" },
258 { replaceText: "这是替换文本1" }
259 ]
260 },
261 {
262 OriginalText: [
263 { OriginalText: "这是原始文本1" },
264 { OriginalText: "这是原始文本2" }
265 ],
266 replaceText: [
267 { replaceText: "这是替换文本1" },
268 { replaceText: "这是替换文本1" },
269 { replaceText: "这是替换文本1" }
270 ]
271 },
272 {
273 OriginalText: [
274 { OriginalText: "这是原始文本1" },
275 { OriginalText: "这是原始文本2" }
276 ],
277 replaceText: [
278 { replaceText: "这是替换文本1" },
279 { replaceText: "这是替换文本1" },
280 { replaceText: "这是替换文本1" },
281 { replaceText: "这是替换文本2" }
282 ]
283 },
284 {
285 OriginalText: [
286 { OriginalText: "这是原始文本1" },
287 { OriginalText: "这是原始文本2" }
288 ],
289 replaceText: [
290 { replaceText: "这是替换文本1" },
291 { replaceText: "这是替换文本1" },
292 { replaceText: "这是替换文本1" },
293 { replaceText: "这是替换文本2" }
294 ]
295 },
296 {
297 OriginalText: [
298 { OriginalText: "这是原始文本1" },
299 { OriginalText: "这是原始文本2" }
300 ],
301 replaceText: [
302 { replaceText: "这是替换文本1" },
303 { replaceText: "这是替换文本1" },
304 { replaceText: "这是替换文本1" },
305 { replaceText: "这是替换文本2" }
306 ]
307 },
308
309 ],
310 }
311
312 }
313
314
315 }
316
来源：oschina
链接：https://my.oschina.net/u/4317554/blog/4234910