Element-ui组件练习项目

具体步骤

1.自创一个vue项目

2.下载element组件包

npm install element-ui@2.13.2

3. 在view目录下创建一个view文件，将需要的组件复制粘贴到其中

首先，需要分析图片中需要用到哪些组件，在搭好框架后，在向里面添加其他组件

1.容器布局文件，控制整个页面布局，在相应的标签部分输入，就能在对应的位置显示

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2.输入框组件
3.表单组件
4.页面组件

4.在APP.vue项目中导入创建的view文件

5.创建数据测试接口（这里用的是YApi创建）

6.使用钩子函数mounted（），完成挂载后，就调用

这里需要注意的是，钩子函数需要放在methods外部

7.axios异步处理，将数据测试接口中的值输出到页面

 axios.get("http://yapi.smartxwork.cn/mock/261190/admin/index").then((result) => {this.tableData=result.data.data}

data () {
    return {
      tableData:[],}

需要注意的是，如果result为多个对象的话，这里定义的tableData就应该是数组
get()的参数为数据响应地址，this.tableData=result.data.data，是将对象放入数组，然后通过标签遍历出来

因为这里引用了一个el-table标签，这里遍历就可以用 :data=“”的方式绑定数组，prop=“属性名”，就能将对象属性遍历