ElementUI电商项目实践（四）

实现数据分页效果

Pagination分页

layout属性用来指定页面上显示哪些结构的

代码

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pagenum"
        :page-sizes="[1,2,5,10]"
        :page-size="queryInfo.pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

监听事件

  //监听 pages 改变的事件
    handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.size = newSize
        this.getUserList()
    },
    //监听页码值 改变的事件
    handleCurrentChange(newPage) {
        // console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getUserList()
    }

调整样式

.el-pagination {
    margin-top: 15px;
}

实现用户状态的修改

将用户的状态同步保存到后台的数据库中

1. 监听到switch状态的改变
2. 调用对应的api接口，把最新的状态保存到数据库中

如何监听switch的状态改变呢？

利用change事件

代码：

 <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="userStateChanged(scope.row)"
            ></el-switch>
            <!-- {{ scope.row }} -->
          </template>

  // 监听switch状态开关的改变
    async userStateChanged(userinfo) {
      // console.log(userinfo)
      const { data: res } = await this.$http.put(
        `users/${userinfo.id}/state/${userinfo.mg_state}`
      )
      if (res.meta.status != 200) {
          //将状态取反
        userinfo.mg_state = !userinfo.mg_state
        return this.$message.error('更新失败')
      }
      this.$message.success('更新状态成功！')
    },

搜索框清除，设置clearable

添加用户 dialog对话框

要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。

<el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="50%"
    >
    //内容主体区
      <span>这是一段信息</span>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

效果：

添加用户的对话框中渲染一个添加用户的表单

代码：

<el-form
        ref="ruleFormRef"
        :model="addForm"
        :rules="addFormRules"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>

addForm: { username: '', password: '', emial: '', mobile: '' },
      //   添加表单的验证规则对象
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3～10个字符之间',
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在6～15个字符之间',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在6～15个字符之间',
            trigger: 'blur',
          },
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在6～15个字符之间',
            trigger: 'blur',
          },
        ],
      },