Element页面组件实现+axios异步加载数据

（格式化代码：快捷键 shift+alt+f）

1.打开发现依旧是之前的网页

因为根组件引用的依然为之前的Element.vue

先注释掉

2.确认布局，拷贝

3.更改标题

<el-header style="font-size:40px;background-color: rgb(4, 80, 31)">tlias 智能学习辅助系统</el-header>
            <el-container>

4.更改侧边栏

<el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>

删除不需要的部分

5.制作右侧边栏

官网代码

<el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>

修改所需要的部分，对应数据的属性

 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="140"></el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>

定义数据模型

6.制作行内表单

v-model:更改绑定的数据模型，修改至searchForm

 <el-form :inline="true" :model="searchForm" class="demo-form-inline">

java部分：

下一个表单：

准备日期选择器：

修改绑定的数据模型：

 <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">

7.分页条：

直接复制之前Element里写好的组件：（注意同时把方法也复制粘贴过来）

<el-pagination background layout="sizes,prev, pager, next,jumper,total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
          </el-pagination>
handleSizeChange: function (val) {
      alert("每页记录数变化" + val)
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val)
    },

通过Axious完成数据异步加载

1.安装Axious

右键文件，在集成终端中打开

在终端输入

npm install axios

重启项目

通过axios发起异步请求：在方法（mounted）中

双引号内输入网址：

新地址：mock.apifox.cn/m1/3128855-0-default/emp/list

 axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{

    }).catch((err)=>{

    });

删去失败的回调

需要的是返回回来的data数组数据，所以后面再跟一个.data

把返回回来的数据赋值给数据模型（tableData）

显示页面：

处理性别和图像的信息

因为直接显示的是gender字段，所以显示的是1和2，下一步为数据转换

来到Element官网

template定义的属性slot-scope为插槽

row：获取这一行所有的字段值

声明插槽并删除字段，中间为三元运算符

处理图像

显示为一个图像的url地址，加上插槽

解决左侧侧边栏边框线

复制container代码到aside中，删去高度

出现滚动条：说明设置的宽度太小