关于vue的jsx语法

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

 

以下是代码：

　　

//以下是table
    <div style="width:100%;">
          <i-table border :columns="columns2" :data="data2" style="width:100%;"></i-table>                
    </div>


//以下是data数据

export default{
        data(){
            return {
              columns2: [
        {
          title: "编号",
          key: "num",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h("div", [h("strong", params.index + 1)]);
          }
        },
        {
          title: "原文本",
          key: "OriginalText",
          align: "center",
          render: (h, params) => {
            console.log(params.row);
            const _self = this;
            const arr = [];
            debugger;
            console.log(_self.data2[params.index].OriginalText, "OriginalText");

            _self.data2[params.index].OriginalText.forEach((item, index) => {
              arr.push(
                h("Input", {
                  props: {
                    value: item.OriginalText
                  },
                  style: {
                    margin: "5px 0"
                  },
                  on: {
                    input: value => {
                      debugger;
                      console.log(item.OriginalText);
                      params.row.OriginalText[index].OriginalText = value;
                      console.log(value);
                      _self.data2[params.index] = params.row;
                      _self.n++;
                      console.log(_self.data2);
                    }
                  }
                })
              );
            });
            return h(
              "Row",
              {
                style: {
                  padding: "10px 0"
                }
              },
              [
                h(
                  "i-col",
                  {
                    attrs: {
                      span: 20
                    }
                  },
                  arr
                ),
                h(
                  "i-col",
                  {
                    attrs: {
                      span: 4
                    },
                    style: {
                      marginTop: "8px"
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        attrs: {
                          type: "ghost",
                          size: "small"
                        },
                        style: {
                          border: "none"
                        },
                        on: {
                          click: function() {
                            debugger;
                            //   console.log(_self.data2[params.index].OriginalText,'_self.data2[params.index].OriginalText')
                            _self.data2[params.index].OriginalText.push({
                              OriginalText: ""
                            });
                            _self.n++;
                          }
                        }
                      },
                      [
                        h("Icon", {
                          props: {
                            type: "plus-circled"
                          },
                          style: {
                            fontSize: "24px",
                            color: "#39f"
                          }
                        })
                      ]
                    )
                  ]
                )
              ]
            );
          }
        },
        {
          title: "替换文本",
          key: "replaceText",
          align: "center",
          render: (h, params) => {
            console.log(params.row);
            const _self = this;
            const arr = [];

            _self.data2[params.index].replaceText.forEach((item, index) => {
              arr.push(
                h("Input", {
                  props: {
                    value: item.replaceText
                  },
                  style: {
                    margin: "5px 0"
                  },
                  on: {
                    input: value => {
                      // debugger;
                      console.log(item.replaceText);
                      params.row.replaceText[index] = value;
                      console.log(value);
                      _self.data2[params.index] = params.row;
                      console.log(_self.data2);
                      _self.n++;
                    }
                  }
                })
              );
            });
            return h(
              "Row",
              {
                style: {
                  padding: "10px 0"
                }
              },
              [
                h(
                  "i-col",
                  {
                    attrs: {
                      span: 20
                    }
                  },
                  arr
                ),
                h(
                  "i-col",
                  {
                    attrs: {
                      span: 4
                    },
                    style: {
                      marginTop: "8px"
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        attrs: {
                          type: "ghost",
                          size: "small"
                        },
                        style: {
                          border: "none"
                        },
                        on: {
                          click: function() {
                            debugger;
                            _self.data2[params.index].replaceText.push({
                              replaceText: ""
                            });
                            console.log(_self.data2);
                          }
                        }
                      },
                      [
                        h("Icon", {
                          props: {
                            type: "plus-circled"
                          },
                          style: {
                            fontSize: "24px",
                            color: "#39f"
                          }
                        })
                      ]
                    )
                  ]
                )
              ]
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      //this.delete(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data2: [
        {
          OriginalText: [
            { OriginalText: "这是原始文本1" },
            { OriginalText: "这是原始文本2" }
          ],
          replaceText: [
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" }
          ]
        },
        {
          OriginalText: [
            { OriginalText: "这是原始文本1" },
            { OriginalText: "这是原始文本2" }
          ],
          replaceText: [
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" }
          ]
        },
        {
          OriginalText: [
            { OriginalText: "这是原始文本1" },
            { OriginalText: "这是原始文本2" }
          ],
          replaceText: [
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本2" }
          ]
        },
        {
          OriginalText: [
            { OriginalText: "这是原始文本1" },
            { OriginalText: "这是原始文本2" }
          ],
          replaceText: [
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本2" }
          ]
        },
        {
          OriginalText: [
            { OriginalText: "这是原始文本1" },
            { OriginalText: "这是原始文本2" }
          ],
          replaceText: [
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本1" },
            { replaceText: "这是替换文本2" }
          ]
        },
        
      ],
            }
    
        }


}