Render follows, encapsulating a form and adding data to the table

render Here comes the follow-up , Form adding data to a table

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: ' X.h. ',
        age: ' male ',
        address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
      }, {
        date: '2016-05-04',
        name: ' X.h. ',
        age: ' male ',
        address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
      }, {
        date: '2016-05-01',
        name: ' X.h. ',
        age: ' male ',
        address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
      }, {
        date: '2016-05-03',
        name: ' X.h. ',
        age: ' male ',
        address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
      }],
      form: {
        name: "name",
        sex: " male ",
        timer: "2022-06-28",
        address: " Address ",
      }
    }
  },
  render: function(createElement) {
    const that = this
    return createElement('div', {
      attrs: {
        id: "content"
      }
    }, [
      createElement('div', {
        attrs: {
          class: "div1"
        }
      }, [
        createElement('el-table', {
          style: {
            width: '100%',
          },
          props: {
            data: this.tableData,
          },
          ref: 'extendTable'
        }, [
          createElement('el-table-column', { props: { prop: "date", label: " date ", align: "center" } }),
          createElement('el-table-column', { props: { prop: "name", label: " full name ", align: "center" } }),
          createElement('el-table-column', { props: { prop: "age", label: " Gender ", align: "center" } }),
          createElement('el-table-column', { props: { prop: "address", label: " Address ", align: "center" } }),
          createElement('el-table-column', {
            props: { label: " operation ", align: "center" },
            scopedSlots: {
              default: props => createElement('el-button', {
                domProps: {
                  innerHTML: " Click on "
                },
                on: {
                  click: function() {
                    console.log(props, ' The value of the current row ', props.row);
                  },
                },
              })
            },
          }),
        ])
      ]),
      createElement('div', {
        attrs: {
          class: "div2"
        },
        style: {
          marginTop: "50px",
          width: "400px",
          textAlign: "left"
        }
      }, [
        createElement('el-button', {
          props: {
            type: "primary"
          },
          style: {
            marginBottom: "20px"
          },
          domProps: {
            innerHTML: " Add data "
          },
          on: {
            click: function() {
              that.tableData.push({
                date: that.form.timer,
                name: that.form.name,
                age: that.form.sex,
                address: that.form.address
              })
            }
          }
        }),
        createElement('el-form', {
          props: {
            labelWidth: "80px"
          },
          ref: 'form1'
        }, [
          createElement('el-form-item', {
            props: {
              label: " full name ",
            }
          }, [
            createElement('el-input', {
              props: {
                value: that.form.name
              },
              on: {
                input: function(event) {
                  that.form.name = event
                }
              }
            })
          ]),
          createElement('el-form-item', {
            props: {
              label: " Gender "
            }
          }, [
            createElement('el-select', {
              props: {
                value: that.form.sex
              },
              on: {
                change: function(event) {
                  that.form.sex = event
                }
              }
            }, [
              createElement('el-option', {
                props: {
                  label: " male ",
                  value: " male "
                }
              }),
              createElement('el-option', {
                props: {
                  label: " Woman ",
                  value: " Woman "
                }
              })
            ])
          ]),
          createElement('el-form-item', {
            props: {
              label: " date "
            }
          }, [
            createElement('el-date-picker', {
              props: {
                value: that.form.timer,
                type: 'date',
                valueFormat: 'yyyy-MM-dd'
              },
              on: {
                input: function(event) {
                  that.form.timer = event
                }
              }
            })
          ]),
          createElement('el-form-item', {
            props: {
              label: " Address "
            }
          }, [
            createElement('el-input', {
              props: {
                type: "textarea",
                value: this.form.address
              },
              on: {
                input: function(event) {
                  that.form.address = event
                },
              }
            })
          ])
        ]
        )]
      )]
    )
  },
}
</script>