Element学习（布局组件、案例操作）（4）

news2025/1/19 11:21:27

1、页面整体的布局

2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）
<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>

3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）

4、基本框架和一部分内容填写完之后展示效果

5、在主展示区域的上方添加"员工查询"的（且独占一行）表单

placeholder：表示输入框内的内容

value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2

定义数据模型时，对象要使用大括号。像这里searchForm: {....}

还有一个当点击"查询"按钮时，会触发一个方法，也要去声明

6、日期选择器——>(官网中组件中找)

找到合适的，并进行修改
<el-form-item label="入职日期">
              
              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
              
            </el-form-item>
注意绑定的数据模型："entrydate"是有两个值，所以下面声明的时候用数组

最终查询表单的效果如下

7、给表格增加一个边框——>加入border属性即可

<!-- 主体表格 -->
          <el-table :data="tableData" border>
            <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="140"></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>
          </el-table>