render后续来了，封装一个表单往表格中添加数据

render后续来了，表单往表格中添加数据

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        age: '男',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        age: '男',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        age: '男',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        age: '男',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      form: {
        name: "name",
        sex: "男",
        timer: "2022-06-28",
        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: "日期", align: "center" } }),
          createElement('el-table-column', { props: { prop: "name", label: "姓名", align: "center" } }),
          createElement('el-table-column', { props: { prop: "age", label: "性别", align: "center" } }),
          createElement('el-table-column', { props: { prop: "address", label: "地址", align: "center" } }),
          createElement('el-table-column', {
            props: { label: "操作", align: "center" },
            scopedSlots: {
              default: props => createElement('el-button', {
                domProps: {
                  innerHTML: "点击"
                },
                on: {
                  click: function() {
                    console.log(props, '当前行的值', 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: "添加数据"
          },
          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: "姓名",
            }
          }, [
            createElement('el-input', {
              props: {
                value: that.form.name
              },
              on: {
                input: function(event) {
                  that.form.name = event
                }
              }
            })
          ]),
          createElement('el-form-item', {
            props: {
              label: "性别"
            }
          }, [
            createElement('el-select', {
              props: {
                value: that.form.sex
              },
              on: {
                change: function(event) {
                  that.form.sex = event
                }
              }
            }, [
              createElement('el-option', {
                props: {
                  label: "男",
                  value: "男"
                }
              }),
              createElement('el-option', {
                props: {
                  label: "女",
                  value: "女"
                }
              })
            ])
          ]),
          createElement('el-form-item', {
            props: {
              label: "日期"
            }
          }, [
            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: "地址"
            }
          }, [
            createElement('el-input', {
              props: {
                type: "textarea",
                value: this.form.address
              },
              on: {
                input: function(event) {
                  that.form.address = event
                },
              }
            })
          ])
        ]
        )]
      )]
    )
  },
}
</script>