目标：创建一个自定义控件，看看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就是这么优秀！
本章完
网友评论