vue3.0后台管理项目（day13）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

上一篇文章中我们使用到element-plus中的form表格组件来完成我们的用户中心表单样式，还使用mock来模拟虚假数据，接下来我们将要把获取到的用户数据渲染到页面上。

1. 在el-table的:data=""里面填入我们创建的空数组userData,然后el-table-column property=""，这里绑定的数据需要和我们mock模拟的数据的名称保持一致，否则不会出现数据，label就是表格每一列的名称，绑定完成之后回到我们的页面上就可以看到完整的表单数据了，如下图所示：

2. 我们需要在每一列的后面加上编辑和删除操作，首先我们到element-plus官网里找到el-button按钮组件，然后在自己创建一个el-table-columu,里面的代码如下所示：

 <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="dialogFormVisible = true"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>

这样我们的页面上表格的后面一列就有编辑以及删除两个操作按钮了，后续还会为这两个按钮添加弹出框进行数据的编辑操作。

3. 表格上面的搜索和新增按钮道理也同样

在组件库中找到el-form组件，然后添加el-input，里面的placehodle赋值为请输入姓名以及请输入手机号，然后添加两个el-button按钮，分别为搜索以及新增，用来编辑表格的数据，后续会为这恋歌按钮加编辑功能。