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

骑猪看日落 2023-07-03 12:20 8阅读 0赞

#### 一、Element UI中表格的渲染 ####

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

created () { 
        this.getUserList()
     }

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

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

1.  在`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)
    }

1.  在获取到数据以后，我们就可以结合`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>

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

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

1.  在`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">
            
            
            <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
            </el-switch>
        </template>
    </el-table-column>

1.  在`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>

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

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

1.  在`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>

1.  在`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>

1.  **表格的渲染、分页和搜索功能的实现效果**：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200206192602360.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70