ElementUI表格筛选功能-vue如何结合ElementUI实现表格渲染、分页和搜索功能？

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1.ElementUI中表格的渲染。 页表中的数据可以在页面开始加载时获取。 可以使用created()的生命周期钩子函数来调用其获取数据的方法。 代码如下：

created () {
    this.getUserList()
 }

定义数据中要使用的数据。 根据api socket返回的数据，queryInfo为获取用户列表的参数对象，userList为获取到的用户列表，total为数据总量。 代码如下：

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

在方法中，定义之前在created()中调用的函数getUserList()。 在getUserList()函数中，调用表数据套接字。 由于返回值是Promise对象，因此可以使用async和await来简化操作。 通过响应状态码判断，如果状态码不为200ElementUI表格筛选功能，则表示数据采集失败，否则表示数据采集成功。 当获取数据成功后，将响应中获取的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)
}

获取到数据后，我们就可以结合ElementUI中的Table组件来勾画表格了。 el-table可以定义一个表，el-table-column可以定义表中的列。 对于表中的数据，可以按照：el-table中的data接收，绑定属性，绑定数据得到表响应，即data中定义的userList。 对于每一项，可以根据el-table-column中的prop来接收，并根据指定的数组来接收通过socket返回的数据。 代码如下：

<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>

这样的桌子看起来可能不太漂亮。 我们可以向表格添加边框和斑马图案。 在Table组件中，TableAttributes中，有一个border属性。 它的作用是是否有水平边框。 它是一个布尔类型。 默认值为 false。 当设置为 true 时，表格将有边框。 在TableAttributes中，还有一个stripe属性。 它的作用是是否是斑马纹表。 它是一个布尔类型。 默认值为 false。 设置为 true 时，表格将具有斑马图案。 代码如下：

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

在el-table-column中，有一个叫做status的项目。 我们可以使用 Switch 组件来修改它。 通过模板template和scope jack slot-scope="scope"，我们就可以在上面插入Switch组件了。 在Switch组件中，我们可以通过v-model获取其对应状态的值。 通过scope.row，可以获取当前行的数据。 在 Switch 中，正在掀起一场变革风暴。 其作用是开关状态改变时的反弹功能。 回弹参数是新状态的值。 我们可以通过@change绑定一个storm，只有当点击状态发生变化时才会触发。 代码如下：

<el-table-column prop="mg_state" label="状态">
    <template slot-scope="scope">
        
        { scope.row }} -->
        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
        </el-switch>
    </template>
</el-table-column>

在方法中，定义之前绑定的方法serStateChange(scope.row)，但传入当前行的数据。 点击scope.row即可获取当前行的数据。 在该函数中，调用状态变化的socket并获取响应数据。 使用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('更新用户状态成功！')
}

2、ElementUI中表格的分页 对于ElementUI中表格数据的分页，我们可以使用ElementUI中的Pagination分页组件。 在el-pagination中ElementUI表格筛选功能，需要定义几个数据。 Size-change在pageSize（即每页显示的item数量）发生变化时触发，与handleSizeChange绑定。 current-change在currentPage发生变化时触发，即当前显示的页脚数，与handleCurrentChange绑定。 Current-page 是当前页码。 可以给它传入queryInfo.pagenum形参来获取data中列表数据的当前页脚编号。 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>

在该方法中，定义与@size-change绑定的handleSizeChange，用于监听pagesize的变化以及每页显示的条目数。 将窃听收到的每页显示多少条数据的newSzie参数赋予pagesize。 更改后，重新发起获取数据的请求。 代码如下：

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

在该方法中，定义handleCurrentChange，它绑定到@current-change，用于监听当前页脚值的变化。 将窃听收到的当前页脚值的newPage参数赋予pagenum。 更改后，重新发起获取数据的请求。 这样就实现了寻呼功能。 代码如下：

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

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

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

在ElementUI的Input输入框组件中，在InputAttributes中，有一个clearable属性。 它的作用是是否可以清除。 它是一个布尔类型值。 默认为 false。 我们可以将其设置为true，这样在输入框中就会有一个小x。 当您输入错误时，单击一次即可清除输入框中的所有内容。 同时，为了点击后重新获取表中的最新数据，我们可以在InputEvents中设置一个清除风暴，当点击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>

4、ElementUI中表格渲染、分页和搜索功能的实现。 实现表格渲染、分页和搜索功能。 完整代码如下：

<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>

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