关于vue的jsx语法

两盒软妹~` 提交于 2020-11-10 07:12:14

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!