关于vue的jsx语法

 ?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.replaceText137 ??????????????????},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: 20168 ????????????????????}169 ??????????????????},170 ??????????????????arr171 ????????????????),172 ????????????????h(173 ??????????????????"i-col",174 ??????????????????{175 ????????????????????attrs: {176 ??????????????????????span: 4177 ????????????????????},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 ????????