目标：创建一个自定义控件，看看vue和element能干什么

在动手之前，我们先观察下App.vue的代码，代码没几行，没写过程序的人应该也不会觉得害怕

可以看到，默认的项目里面，赠送了一个HelloWorld的component

App.vue导入了这个控件，并且设置了msg这个属性值为Welcome to ....

仿造这个，我们做一个能动态增加数据行的表格，体验一下vue的强大

先在components目录下新增MyComponent.vue文件，添加方法如下

输入名称MyComponent，文件创建如下

我们从element官网，table控件的介绍页，复制一个表格过来

https://element.eleme.cn/#/zh-CN/component/table

把代码复制到我们的文件中，调整一下格式，原来的代码分了很多行，看着很累

然后我们把App.vue中的HelloWorld改成我们的名字（之前我们加的那个按钮，代码删掉）

保存文件后，我们刷新下页面（其实内容会自动刷）

很成功，我们已经完成了一个表格页面！

回头看一下MyComponent的代码，发现相当简单

代码中<template>部分，定义了表格和表格项，并指定数据来源

<script>部分，我们定义了tableData的数据，就可以了。

当然，我们不会只满足于一个静态的表格，来个高级的，尝试下动态添加表格的数据

一般我们都用表单来提交数据，这里我们需要输入日期、姓名和地址

只有3个输入项，再加一个确定按钮，所以显示在一行会比较好。

打开element文档，form这一页，找到“行内表单”这里

把代码复制到我们的文件里面，要稍微改一下

template部分改成这样，添加了表单，里面放了一个日期选择框和两个输入框，一个按钮

script部分，改成这样

看一下效果，可以动态添加表格数据了

是不是很神奇又很简单？ 在远古时代，这样的高级功能可不是一般的菜鸟能写出来的

就算是jquery，在获取服务器数据后，动态渲染页面也是一个很麻烦的事

而我们只用了一行代码，vue就是这么优秀！

本章完