關於vue的jsx語法
阿新 • • 發佈：2018-02-11
push his delet tar clas tps export uid text
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
關於vue的jsx語法