vue结合Element UI如何实现表格的渲染、分页和搜索功能

一、Element UI中表格的渲染

1. 对于页面表格中的数据，在页面一开始加载的时候就可以获取的到，可以使用created()的生命周期钩子函数，在里面去调用获取数据的方法，代码如下：

created () {
    this.getUserList()
 }

2. 在data中定义需要使用到的数据，根据api接口返回的数据，queryInfo是获取用户列表的参数对象，userList是获取的用户列表，total是为数据的总数，代码如下：

data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 查询参数
        query: '',
        // 当前的页码数
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 2
      },
      // 获取的用户列表
      userList: [],
      // 总数
      total: 0
    }
 }

3. 在method中，定义之前在created()中所调用的函数getUserList()。在getUserList()函数中，进行表格数据接口的调用。由于返回值为Promise对象，所以可以用async和await进行简化操作。通过响应的状态码判断，如果状态码不为200，说明获取数据失败，反之则获取数据成功。当数据获取成功以后，将响应获得的users赋值给data中的userList，响应获得的total赋值给data中的total，代码如下：

async getUserList () {
  const {data: res} = await this.$http.get('users', {
    params: this.queryInfo
  })
  if (res.meta.status !== 200) {
    return this.$message('获取用户列表失败！')
  }
  this.userList = res.data.users
  this.total = res.data.total
  console.log(res)
}

4. 在获取到数据以后，我们就可以结合Element UI中Table表格组件绘制表格了。el-table 是可以定义一个表格， el-table-column 是可以定义表格中的一列。对于表格中的数据，可以根据el-table中:data进行接收，绑定属性，绑定获取表格响应的数据，也就是data中定义的userList。对于每一项，可以根据el-table-column中的prop进行接收，通过接口中返回的数据，按照指定的字段进行接收，代码如下：

<el-table :data="userList">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="用户名称"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mg_state" label="状态">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <!-- 修改按钮 -->
                <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                <!-- 删除按钮 -->
                <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                <!-- 分配角色按钮 -->
                <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                    <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
</el-table>

5. 这样的表格可能看起来并不美观，我们可以为表格添加边框和斑马纹。在Table表格组件中，在Table Attributes中，有一个border属性，它的作用是是否带有纵向边框，是一个boolean类型，默认值为false，当设置为true的时候，表格就有边框了。在Table Attributes中，还有一个stripe属性，它的作用是是否为斑马纹 table，是一个boolean类型，默认值为false，当设置为true的时候，表格就有斑马纹了，代码如下：

<el-table :data="userList" :stripe="true" :border="true">

6. 在el-table-column中，有一项为状态，我们可以使用Switch组件，去进行更改，通过template模版以及作用域插槽slot-scope="scope"，在里面去插入Switch组件。在Switch组件中，我们可以通过v-model来获取其相应状态的值。通过scope.row， 可以取到当前一行的数据。在Switch中，有一个change事件，它的作用是switch 状态发生变化时的回调函数，回调参数是新状态的值。我们可以通过@change去绑定一个事件，当点击状态发生改变之后就会触发，代码如下：

<el-table-column prop="mg_state" label="状态">
    <template slot-scope="scope">
        <!-- scope.row 可以取到当前一行的数据 -->
        <!-- {{ scope.row }} -->
        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
        </el-switch>
    </template>
</el-table-column>

7. 在method中，定义之前绑定的方法serStateChange(scope.row)，并且传入当前行的数据。通过点击，以及scope.row，就可以获取当前行的数据。在这个函数中，去调用状态改变的接口，获取到响应的数据。通过async和await去简化操作，因为返回值是一个Promise对象。如果响应的状态码不是200，说明更新失败了，就需要将状态更改为更新之前的状态，通过取反操作实现，反之则更新成功了，代码如下：

// 监听 switch 开关状态的改变
async userStateChange (userInfo) {
  // console.log(userInfo)
  const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
  if (res.meta.status !== 200) {
    // 更新失败，将状态返回初始状态
    this.userInfo.mg_state = !this.userInfo.mg_state
    this.$message.error('更新用户状态失败！')
  }
  this.$message.success('更新用户状态成功！')
}

二、Element UI中表格的分页

1. 对于Element UI中表格数据的分页，我们可以使用Element UI中的Pagination分页组件。在el-pagination中，需要定义几个数据。size-change是pageSize 改变时会触发，也就是每页显示的条数，绑定handleSizeChange事件。current-change是currentPage 改变时会触发，也就是当前显示的页码数，绑定handleCurrentChange事件。current-page是当前的页数，可以将data中获取列表数据的当前页码数queryInfo.pagenum赋值给它。page-sizes是每页显示个数选择器的选项设置，我们可以根据实际的需求去设置，比如为[1, 2, 5, 10]。page-size是每页显示的条目数，可以将data中获取的数据列表的每页显示的数据queryInfo.pagesize赋值给它。layout是组件布局，子组件名用逗号分隔。total是总条目数，代码如下：

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

2. 在method中，定义@size-change所绑定的事件，handleSizeChange，用来监听 pagesize的改变，每页显示的条目数。 将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize， 修改完以后，重新发起请求获取一次数据，代码如下：

// 监听 pageSize 改变的事件
handleSizeChange (newSize) {
  //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
  this.queryInfo.pagesize = newSize
  //  修改完以后，重新发起请求获取一次数据
  this.getUserList()
}

3. 在method中，定义@current-change所绑定的事件，handleCurrentChange，监听当前页码值的改变。将监听接受到的当前页码值的数据 newPage 赋值给 pagenum，修改完以后，重新发起请求获取一次数据，这样分页功能就实现了，代码如下：

// 监听  pagenum 改变的事件
handleCurrentChange (newPage) {
  //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
  this.queryInfo.pagenum = newPage
  //  修改完以后，重新发起请求获取一次数据
  this.getUserList()
}

三、Element UI中表格的搜索

1. 对于搜索功能，我们可以使用input输入框，通过v-model实现双向数据绑定，而绑定的值就是获取用户列表的参数对象的查询参数queryInfo.query。在button按钮中，定义一个点击事件，调用getUserList()函数，当点击搜索以后，重新发起用户数据的请求，代码如下：

<el-input placeholder="请输入内容" v-model="queryInfo.query">
    <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
</el-input>

2. 在Element UI的Input输入框组件中，在Input Attributes中，有一个clearable属性，它的作用是是否可清空，是一个boolean类型的值，默认为false，我们可以把它设置为true，这样在输入框中会有一个小x,当输入错误以后，点击一下就可以将输入框中所有的内容进行清空了。同时，为了点击以后，表格的数据能够重新获取最新的，我们可以在Input Events中，有一个clear事件，它的作用是在点击由 clearable 属性生成的清空按钮时触发。我们可以在@clear中，调用获取数据的方法getUserList()就可以了，代码如下：

 <el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getUserList()">
    <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
</el-input>

四、Element UI中表格的渲染、分页和搜索功能的实现

1. 表格的渲染、分页和搜索功能的实现，完整代码如下：

<template>
    <div>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList()">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <el-table :data="userList" :stripe="true" :border="true">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="username" label="用户名称"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="mobile" label="电话"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column prop="mg_state" label="状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        <!-- 分配角色按钮 -->
                        <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 查询参数
        query: '',
        // 当前的页码数
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 2
      },
      // 获取的用户列表
      userList: [],
      // 总数
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const {data: res} = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message('获取用户列表失败！')
      }
      this.userList = res.data.users
      this.total = res.data.total
      console.log(res)
    },
    // 监听 pageSize 改变的事件
    handleSizeChange (newSize) {
    //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
      this.queryInfo.pagesize = newSize
      //  修改完以后，重新发起请求获取一次数据
      this.getUserList()
    },
    // 监听 页码值  改变的事件
    handleCurrentChange (newPage) {
    //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
      this.queryInfo.pagenum = newPage
      //  修改完以后，重新发起请求获取一次数据
      this.getUserList()
    },
    // 监听 switch 开关状态的改变
    async userStateChange (userInfo) {
      console.log(userInfo)
      const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
      if (res.meta.status !== 200) {
        // 更新失败，将状态返回初始状态
        this.userInfo.mg_state = !this.userInfo.mg_state
        this.$message.error('更新用户状态失败！')
      }
      this.$message.success('更新用户状态成功！')
    }
  }
}
</script>

<style lang="less" scoped>

</style>

2. 表格的渲染、分页和搜索功能的实现效果：