element-ui实现表格分页和搜索功能

5 篇文章 5 订阅
2 篇文章 0 订阅

一.首先展示下做出的页面效果

1.以下页面是物资列表界面,将所有的物资分页展示出来。

2.将搜索内容分页展示出来,以下页面是含关键字“子”时展示的数据

3.当搜索框为空时展示全部数据

二.具体的实现

1.物资列表分页显示是使用了element-ui中el-table和el-pagination标签。代码如下:

div class="table_resource" style="text-align:center">
            <el-table :data="showTable" border style="width: 100%">
                <el-table-column type="index"  prop="order" label="序号" width="150" align="center">
                </el-table-column>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="120" align="center">
                </el-table-column>
                <el-table-column prop="quantity" label="数量" width="120" align="center">
                </el-table-column>
                <el-table-column prop="unitPrice" label=" 单价" width="120" align="center">
                </el-table-column>
                <el-table-column prop="totalPrice" label="总价(元)" width="120" align="center">
                    <div slot-scope="scope">
                        {{scope.row.totalPrice=scope.row.quantity*scope.row.unitPrice}}
                    </div>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="338" align="center">
                </el-table-column>
            </el-table>
        </div>

        <div class="resource-page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[3,5,15]" :page-size="pagesize" :pager-count="7"
                layout=" prev, pager, next,sizes, jumper" :total="filterDataShow.length">
            </el-pagination>
        </div>

2.el-table中data是需要在表格中展示的数据。将data属性设置为计算属性,可以根据计算属性的内容将表格分页展示出来。
3.current-change事件会在当前页面发生变化时触发,绑定的是handleCurrentChange方法。

4. pagesize属性绑定的是每页展示的物资个数

5.page-sizes是个number[]数组类型,里面的值代表每页可供选择的展示条目个数。表格的总页数是和此值有关系的。比如总共有15条数据,当page-sizes选择的值为5时,表格每页会展示5条数据,那15/5=3,表格的总页数就是3页,layout中的pager在页面中会出先3个页码按钮,分别为1,2,3。如下图所示

当把page-sizes选择的值为3时,表格每页会展示3条数据,那15/3=5,表格的总页数就是5页,layout中的pager在页面中会出现5个页码按钮,分别为1,2,3,4,5。如下图所示

即使page-sizes数组里已经定义了数据,但是pagesize必须在data中定义,并且赋值,否则会报错。pagesize的赋的值可以和page-sizes数组里的值没有关系,因为page-sizes数组中的第一个值会被默认为首选项,并且将pagesize的值覆盖掉。

5.page-count表示页码按钮的数量,它的值必须为5-21之间的奇数

6.layout是组件布局,子组件名可以按照需求调换顺序,并用逗号分隔。

三.核心的JS代码

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            keywords: '', // 搜索的关键字
            filterDataShow: [], //储存符合条件的数据

            tableData: [{
                    index: '1',
                    name: '圆珠笔',
                    unit: '支',
                    quantity: '45',
                    unitPrice: '2',
                    remarks: '物资充足'
                },
                {
                    index: '2',
                    name: '纸张',
                    unit: '页',
                    quantity: '52',
                    unitPrice: '4',
                    remarks: '物资充足'
                },
                {
                    index: '3',
                    name: '椅子',
                    unit: '把',
                    quantity: '34',
                    unitPrice: '6',
                    remarks: '物资充足'
                },
                 ...
            ], //分页前的数据
            pagesize: 4,
            currentPage: 1,
        },
        methods: {
            searchResource() {
                this.currentPage = 1; //将当前页设置为1,确保每次都是从第一页开始搜
                let filterKeywords = this.keywords.trim();
                let filerReasource = this.tableData.filter(item => { //过滤全部数据
                    if (item.name.includes(filterKeywords)) {
                        return item
                    }
                })
                this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
            },
            onSubmit() {},
            handleSizeChange(psize) {
                this.pagesize = psize;
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
            }

        },
        mounted() {
            this.searchResource(); //在页面挂载后调用此方法,确保数据与页面发生了交互
        },
        watch: { //监听搜索框内容,当搜索框内容发生变化时调用searchResource方法
            keywords: {
                handler() {
                    this.searchResource()
                }

            }

        },
        computed: {
            //showTable计算属性通过slice方法计算表格当前应显示的数据
            showTable() {
                return this.filterDataShow.slice(
                    (this.currentPage - 1) * this.pagesize,
                    this.currentPage * this.pagesize
                );
            }
        }

    })
</script>

 

以上是我在写表格分页的心得及自己的一些看法,如有错误,欢迎指正。

感谢此博文https://blog.csdn.net/Dg_Zing/article/details/87906371给与的指导。

 

  • 9
    点赞
  • 52
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
你可以使用 element-ui 中的 `el-pagination` 组件进行分页查询的实现。 首先,需要在面中导入 `el-pagination` 组件和相关的样式文件: ```html <template> <div> <!-- 分页列表 --> <el-pagination :page-size="pageSize" :current-page="currentPage" :total="total" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" /> <!-- 表格内容 --> <el-table :data="tableData" style="width: 100%" > <!-- 表头 --> <el-table-column prop="name" label="姓名" /> <el-table-column prop="age" label="年龄" /> <el-table-column prop="gender" label="性别" /> </el-table> </div> </template> <script> import { reactive, watch } from 'vue' import { ElTable, ElTableColumn, ElPagination } from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' export default { components: { ElTable, ElTableColumn, ElPagination }, setup() { // 响应式数据 const state = reactive({ tableData: [], // 表格数据 total: 0, // 总记录数 currentPage: 1, // 当前码 pageSize: 10 // 每显示数量 }) // 监听分页数据变化 watch([() => state.currentPage, () => state.pageSize], ([currentPage, pageSize]) => { // 根据当前码和每显示数量进行查询 fetchData(currentPage, pageSize) }) // 查询数据方法 const fetchData = (page, size) => { // 发送请求获取数据 // ... // 更新响应式数据 state.tableData = [/* ... */] state.total = 100 // 假设总记录数为100条 } // 处理码变化事件 const handleCurrentChange = (currentPage) => { state.currentPage = currentPage } return { ...state, fetchData, handleCurrentChange } } } </script> ``` 在上面的代码中,我们使用了 `reactive` 函数创建了一个响应式的 `state` 对象,其中包含了表格数据、总记录数、当前码和每显示数量等数据。在 `watch` 函数中监听了当前码和每显示数量的变化,并在变化时触发 `fetchData` 方法进行数据查询。 在模板中,我们使用了 `el-pagination` 组件和 `el-table` 组件来构建分页查询列表。在 `el-pagination` 组件中,我们通过绑定 `pageSize`、`currentPage` 和 `total` 等属性来实现分页功能,并通过 `layout` 属性来配置分页组件的显示方式。在 `el-table` 组件中,我们使用了 `prop` 和 `label` 属性来定义表格的列信息,并通过 `:data` 属性来绑定表格的数据源。 最后,在 `setup` 函数中,我们定义了 `fetchData` 方法和 `handleCurrentChange` 方法来处理数据查询和码变化事件,并将这两个方法返回给模板。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值