精华内容
下载资源
问答
  • vue实现table分页以及用户手动筛选 话不多说上预览图 由于没有与后端对接,所以这块的数据为假数据 功能点:用户可以对状态进行筛选 分页部分: <!-- 分页组件--> <el-pagination @size-change=...

    vue实现table分页以及用户手动筛选

    话不多说上预览图
    在这里插入图片描述
    由于没有与后端对接,所以这块的数据为假数据

    功能点:用户可以对状态进行筛选

    分页部分:

    <!--        分页组件-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryInfo.currentPage"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="queryInfo.pageSize"
                            layout="total, sizes, prev, next, jumper"
                            prev-text="上一页"
                            next-text="下一页"
                            :total="total">
                    </el-pagination>
    

    先写好分页组件

    getTableData(){
            let data = {
              offset: this.queryInfo.currentPage,
              size: this.queryInfo.size
            }
            console.log("offset为" + data.offset)
            this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
              if(res.data.state){
                console.log(res.data.msg);
                this.tableData=res.data.data.list
                  this.total = res.data.data.total
              }else{
                this.$message.error(res.data.msg)
              }
            })
          },
    

    从后端获取table数据的方法

    getTableDataOne(){
    			let data = {
    				offset: this.queryInfo.currentPage,
    				size: this.queryInfo.size,
    				status: this.status
    			}
    			console.log("offset为" + data.offset)
    			this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
    				if(res.data.state){
    					console.log(res.data.msg);
    					this.tableData=res.data.data.list
    					this.total = res.data.data.total
    				}else{
    					this.$message.error(res.data.msg)
    				}
    			})
    		},
    

    通过筛选条件(status)从后端获取数据的方法

    handleSizeChange (newSize) {
            console.log(`每页 ${newSize} 条`)
            this.queryInfo.size = newSize
            //size改变时currentPage应该为1
            this.queryInfo.currentPage = 1
    		  if(this.flag === 1){
    			  this.getTableData()
    		  }else{
    			  this.getTableDataOne()
    		  }
          },
    

    监听size改变的事件
    通过flag来判断用户是否进行了筛选,如果在筛选状态调用getTableDataOne()方法来获取table数据,反之则调用getTableData()方法来获取table数据

    handleCurrentChange (newPage) {
            console.log(`当前页: ${newPage}`)
            this.queryInfo.currentPage = newPage
    		  if(this.flag === 1){
    			  this.getTableData()
    		  }else{
    			  this.getTableDataOne()
    		  }
          },
    

    监听页码值改变的事件

    筛选部分

    		    <el-table-column
                        label="状态"
                        prop="status"
                        :filters="[{ text: '待平台确认', value: 0 }, { text: '平台已确认', value: 1}]"
                        filter-placement="bottom-end"
                        column-key="status"
                >
                    <template slot-scope="scope">
                        <label v-if="scope.row.status === 0">待平台确认</label>
                        <label v-if="scope.row.status === 1">平台已确认</label>
                    </template>
                </el-table-column>
    

    筛选组件在elementui中有相应模板

    		<el-table
                    :data="tableData.filter(data => !search || data.cashFlow.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    :header-cell-style="{background:'#dcdde3',color:'black'}"
                    border
                    size="small"
                    @filter-change="handleFilterChange"
            >
    

    table标签中加入@filter-change="handleFilterChange"对筛选进行监听

    	   handleFilterChange(filters){
    			this.queryInfo.currentPage = 1
    			console.log(filters.status[0])
    			if(filters.status[0] === 0){
    				this.status = 0
    				this.getTableDataOne()
    				this.flag = 0
    			}
    			if(filters.status[0] === 1){
    				this.status = 1
    				this.getTableDataOne()
    				this.flag = 0
    			}
    			if(filters.status[1] === 0||filters.status[1] === 1){
    				this.flag = 1
    				this.getTableData()
    			}
    			if(filters.status[0] === undefined){
    				this.flag = 1
    				this.getTableData()
    			}
    		},
    
    		flag: 1
    

    筛选的监听事件
    flag为1是未筛选状态,为0是筛选状态
    filters.status[0]的值代表第一个筛选条件(0和1区分待平台确认和平台已确认)
    filters.status[1]的值代表第二个筛选条件,若存在filters.status[1]即(filters.status[1] === 0||filters.status[1] === 1),则说明对两个条件都进行了筛选,调用getTableData()方法
    如果filters.status[0] === undefined则说明没有进行筛选,调用getTableData()方法

    完整代码:

    <template>
        <div id="comInfo">
            <div class="tags">
                <el-tag type="info" color="#0066cc" effect="dark">保证金账户台账</el-tag>
            </div>
            <el-table
                    :data="tableData.filter(data => !search || data.cashFlow.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    :header-cell-style="{background:'#dcdde3',color:'black'}"
                    border
                    size="small"
                    @filter-change="handleFilterChange"
            >
    
                <el-table-column
                        label="序号"
                        type="index">
                </el-table-column>
    
                <el-table-column
                        label="资金流水号"
                        prop="cashFlow">
                </el-table-column>
    
                <el-table-column
                        label="业务类型"
                        prop="type">
                    <template slot-scope="scope">
                        <label v-if="scope.row.type === 0">预存</label>
                        <label v-else-if="scope.row.type === 1">申请退款</label>
                        <label v-else-if="scope.row.type === 2">报价保证金支付</label>
                        <label v-else-if="scope.row.type === 3">履约保证金支付</label>
                        <label v-else-if="scope.row.type === 4">报价保证金退款</label>
                        <label v-else>履约保证金退款</label>
                    </template>
                </el-table-column>
    
                <el-table-column
                        label="状态"
                        prop="status"
                        :filters="[{ text: '待平台确认', value: 0 }, { text: '平台已确认', value: 1}]"
                        filter-placement="bottom-end"
                        column-key="status"
                >
                    <template slot-scope="scope">
                        <label v-if="scope.row.status === 0">待平台确认</label>
                        <label v-if="scope.row.status === 1">平台已确认</label>
                    </template>
                </el-table-column>
    
                <el-table-column
                        label="金额"
                        prop="amount">
                </el-table-column>
    
                <el-table-column
                        label="余额"
                        prop="balance">
                </el-table-column>
    
                <el-table-column
                        label="操作员"
                        prop="adminName">
                </el-table-column>
    
                <el-table-column
                        label="操作时间"
                        prop="gmtModified"
                        :formatter="dateFormat">
                </el-table-column>
    
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="small"
                                   style="background: rgba(43,177,243,0.32)"
                                   @click="check(scope.$index, scope.row)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
    
                //不显示的列
                <el-table-column
                        label="id"
                        prop="id"
                        v-if="show">
                </el-table-column>
                <el-table-column
                        label="adminId"
                        prop="adminId"
                        v-if="show">
                </el-table-column>
            </el-table>
    
            <el-row>
                <el-col :span="9" :offset="15">
                    <!--        分页组件-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryInfo.currentPage"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="queryInfo.pageSize"
                            layout="total, sizes, prev, next, jumper"
                            prev-text="上一页"
                            next-text="下一页"
                            :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </template>
    
    <script>
      export default {
        name: 'AdminMarginAccount',
        data () {
          return {
            //是否显示列
            show: false,
            queryInfo: {
              //初始页
              currentPage: 1,
              //当前每页显示多少条数据
              size: 10,
            },
            //表格假数据
            tableData: [
              {
                cashFlow: '123',
                type: 1,
                status: 0,
                amount: 1200,
                balance: 1200,
                adminName: '张三',
                gmtModified: '',
                id: '1',
                adminId: '1'
              },
              {
                cashFlow: '230',
                type: 0,
                status: 1,
                amount: 1200,
                balance: 1200,
                adminName: '李四',
                gmtModified: '',
                id: '2',
                adminId: '2'
              }
            ],
            search: '',
              total: '',
    
            data: {
              id: '',
              companyId: '',
              cashFlow: '',
              type: '',
              status: '',
              amount: '',
              balance: '',
              remitTime: '',
              voucher: '',
              adminId: '',
              adminName: '',
              gmtCreated: '',
              gmtModified: ''
            },
    		  status: 0,
    		  flag: 1,
          }
        },
    
        methods: {
          getTableData(){
            let data = {
              offset: this.queryInfo.currentPage,
              size: this.queryInfo.size
            }
            console.log("offset为" + data.offset)
            this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
              if(res.data.state){
                console.log(res.data.msg);
                this.tableData=res.data.data.list
                  this.total = res.data.data.total
              }else{
                this.$message.error(res.data.msg)
              }
            })
          },
    		getTableDataOne(){
    			let data = {
    				offset: this.queryInfo.currentPage,
    				size: this.queryInfo.size,
    				status: this.status
    			}
    			console.log("offset为" + data.offset)
    			this.$http.get("/membership/deposit/list",{params: data}).then(res=>{
    				if(res.data.state){
    					console.log(res.data.msg);
    					this.tableData=res.data.data.list
    					this.total = res.data.data.total
    				}else{
    					this.$message.error(res.data.msg)
    				}
    			})
    		},
          // 监听size改变的事件
          handleSizeChange (newSize) {
            console.log(`每页 ${newSize} 条`)
            this.queryInfo.size = newSize
            //size改变时currentPage应该为1
            this.queryInfo.currentPage = 1
    		  if(this.flag === 1){
    			  this.getTableData()
    		  }else{
    			  this.getTableDataOne()
    		  }
          },
          //监听页码值改变的事件
          handleCurrentChange (newPage) {
            console.log(`当前页: ${newPage}`)
            this.queryInfo.currentPage = newPage
    		  if(this.flag === 1){
    			  this.getTableData()
    		  }else{
    			  this.getTableDataOne()
    		  }
          },
    
    		// filterStatus(value, row){
            //     return row.status === value;
    		// },
    
            //转换日期格式
    		dateFormat(row, column) {
    			var d = new Date(row.gmtModified);
    			var year = d.getFullYear();
    			var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
    			var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
    			var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
    			var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
    			var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
    			return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
    		},
    
    		handleFilterChange(filters){
    			this.queryInfo.currentPage = 1
    			console.log(filters.status[0])
    			if(filters.status[0] === 0){
    				this.status = 0
    				this.getTableDataOne()
    				this.flag = 0
    			}
    			if(filters.status[0] === 1){
    				this.status = 1
    				this.getTableDataOne()
    				this.flag = 0
    			}
    			if(filters.status[1] === 0||filters.status[1] === 1){
    				this.flag = 1
    				this.getTableData()
    			}
    			if(filters.status[0] === undefined){
    				this.flag = 1
    				this.getTableData()
    			}
    		},
    
    		check (index, row) {
                console.log(index, row)
                this.$router.push("/checkCapitalDeposited/" + row.id)
            },
        },
    
        created () {
            this.getTableData()
        }
      }
    </script>
    
    <style scoped>
        .el-table--enable-row-hover .el-table__body tr:hover > td {
            background-color: #d3e5e0;
        }
    
        .tags {
            width: 100%;
            border-bottom: 2px solid #0066cc;
        }
    
        .first-row div,
        .second-row div {
            display: inline-block;
            width: 300px;
            margin: 0 40px;
        }
    </style>
    
    展开全文
  • vue element table分页, 注意问题汇总

    千次阅读 2019-07-11 20:10:35
    vue element table分页实现: <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border style="width: 100%"> ....... </el-table> 其中主要借助 table...

    vue element table分页实现:

    <el-table
       :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
       border
       style="width: 100%">
    .......
    </el-table>

    其中主要借助 tableData的数组分割来实现分页。currentPage是当前页数,pagesize是每页展示的条数 本项目设置为一页10条数据

     

    关于分页遇到的bug如下:

    (一):查询时后端接口返回数据,但是表格不展示

    背景:

    刚开始打开dialog之后,先调接口渲染一些数据,点击下方页数,切换页面,当切换到第二页的时候,随机取一个手机号码,放到上面手机号搜索框里面,与商圈联合查询的时候,点击查询。

    结果:后端返回一条数据,但是表格不显示。。。。。

    bug排查:

    因为table的数据是通过 tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize) 来显示的,后端有返回,则 tableData有值,通过console.log( (currentPage - 1) * pagesize) ,console.log( currentPage * pagesize)发现!当点击下方页数切换页面时,currentPage变化了,点击第二页 此时currentPage = 2,所以虽然后端返回了1条数据,但是表格应该展示的是tableData.slice(10, 20), 当然取不到,所以就为空了……

    bug解决:

    当点击查询按钮时,数据返回后,把 currentPage 设置值为1,即查询后的结果都从 tableData.slice(0, 10)开始展示,bug ?

    (二): 单选按钮默认问题

    背景:操作栏的选择按钮,比如选择了第一页的最后一条,切换到第二页的时候,第二页的最后一条数据也默认选中了

    bug排查:index赋值不对,点击了第一页的最后一个,index值为9 ,即9是被默认选中的,切换到第二页的时候,第二页的最后一条数据,index也为9,所以也被选中了。。。

    bug解决:每条数据的index按照在整个tableData中去算,利用currentPage 和 pagesize,代码如下:原先:label='scope.$index'

    <el-radio
      :label="scope.$index + (currentPage - 1) * pagesize"
      v-model="templateRadio"
      @change.native="getTemplateRow(scope.row, scope.$index)"
    >选择</el-radio>
    
    
    getTemplateRow (value, index) {
          this.result = value
          const currentIndex = index + (this.currentPage - 1) * this.pagesize
          this.templateRadio = currentIndex //单选按钮默认选中 
        },
    
    templateRadio是radio默认选项。这样就?了~
    展开全文
  • vue实现表格分页

    2019-12-16 11:15:14
    vue实现表格分页 1.src/components/tablepage (1)index.js (2)tablepage.vue 2. view/user/user.vue 1.1src/components/tablepage/index.js import Tablepage from './tablepage.vue'...
                                       vue实现表格分页
    

    1.src/components/tablepage
    (1)index.js
    (2)tablepage.vue
    2. view/user/user.vue

    1.1src/components/tablepage/index.js

    import Tablepage from './tablepage.vue'
    export default Tablepage
    

    1.2src/components/tablepage/tablepage.vue

    <template>
      <div>
        <div class="tableBox">
          <Table :columns="tableTitle" :data="tableData"></Table>
        </div>
        <div class="footer">
          <Page :total="total" :current="pageNum" :page-size="pageSize" @on-change="pageChangeFun"></Page>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Tablepage",
      props: ["tableTitle", "tableData", "total", "pageNum"],
      data() {
        return {
          pageSize: 10 //一页显示多少条数
        };
      },
      methods: {
        pageChangeFun(pageNum) {
          // console.log(pageNum)
          this.$emit("pageChange", pageNum);
        }
      },
      watch: {},
      mounted() {}
    };
    </script>
    <style lang="less" scoped>
    //页脚
    .footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
    </style>
    
    

    import:
    import Tablepage from “_c/tablepage”;//这里的Tablepage 与template中的tablepage和script中的 components: {Tablepage }相对应

    components:
    components: {
    Tablepage
    }

    create:
    this.getlist();

    methods:
    (0) getlist(){}
    (1) @pageChange=“pageChange”//页码改变
    (2) this.showDetail(params.row.ID);//查看详情
    (3) this.getDetail(params.row.ID);//编辑
    (4) this.remove(params.row.ID);//删除

    <template>
      <div class="userManage" id="user-manage">
        <!-- 整体卡片布局 -->
        <Card>
          <div class="container">
            <!-- 表格 -->
            <tablepage
              :tableTitle="tableTitle"
              :tableData="tableData"
              :pageNum="pageNum"
              :total="total"
              @pageChange="pageChange"
            ></tablepage>
          </div>
        </Card>
      </div>
    </template>
    
    import Tablepage from "_c/tablepage";
    
    export default {
      name: "user-manage",
      components: {
        Tablepage
      },
      data() {
        return {
          //分页
          pageNum: 1,
          pageSize: 10,
          total: 0, // 数据条数
          tableTitle: [],
          tableData: [],
        };
      },
      created() {
         //获取用户信息列表
        this.getlist({
          userloginid: "",
          username: "",
          gender: "",
          phone: "",
          address: "",
          email: "",
          pagesize: 10,
          pageindex: 1
        });
        //标题栏
        this.tableTitle = [
          {
            title: "序号",
            // type: "index",
            width: 60,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "span",
                  {
                    props: { type: "text", size: "small" },
                    style: { marginRight: "5px" },
                    on: {
                      click: () => {
                        this.showDetail(params.row.ID);
                      }
                    }
                  },
                  params.index + 1 + (this.pageNum - 1) * this.pageSize
                )
              ]);
            }
          },
          {
            title: "操作",
            align: "center",
            key: "action",
            width: 170,
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.getDetail(params.row.ID);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row.ID);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        ];
      },
      methods: {
      getlist(data) {
          // 获取表格用户信息列表
          接口名(data).then(res => {
            console.log(res);
            // console.log(res.data);
            if (res.status == 200) {
              this.total = res.data.listcount;
              this.tableData = res.data.data;
              // console.log(res.data.data);
              if (this.total == 0) {
                this.$Message.error("暂无数据,请重试或刷新");
              }
            }
          });
        },
        showDetail(id) {
          // 获取用户详情
        },
        getDetail(id) {
          // 跳转到编辑用户页面
          console.log(id);
          this.$router.push({
            name: "user-edit",
            query: { id }
          });
        },
        remove(id) {
          // 删除单行用户信息
        },
        pageChange(pageNum) {
          // 页码改变
          this.pageNum = pageNum;
          this.getlist({
            userloginid: this.userloginid,
            username: this.username,
            gender: this.gender,
            phone: this.phone,
            address: this.address,
            email: this.email,
            pagesize: 10,
            pageindex: pageNum
          });
        }
      }
    };
    
    展开全文
  • 首先组件代码,用官方示例代码即可: ... :data="tableData" //数据双向绑定 style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table

    首先组件代码,用官方示例代码即可:

      <template>
        <el-table
          :data="tableData"		//数据双向绑定
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </template>
    

    修改:data

    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    

    在return data()中声明变量:

          data() {
            return {
              // 当前页
              currentPage: 1,
              // 每页多少条
              pageSize: 10,
              tableData: [],
              id: '',
            }
          },
    

    分页组件:

        <!--分页-->
        <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
    

    一个template只能解析一个根div,要将两个组件放在一个div中
    实现效果:
    在这里插入图片描述

    展开全文
  • vue 实现前端分页

    2020-08-14 11:49:58
    vue 实现前端分页 <template> <div class="table"> <el-table :data="dataShow" stripe style="width: 100%"> <el-table-column prop="port" label="港口名称"></el-table-column>...
  • 主要为大家详细介绍了基于vue2的table分页组件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现前端分页

    2020-05-22 20:14:12
    一般的分页都会在后台有对应的方法,可能是本人太懒了 所以很不喜欢这样,我喜欢直接把数据一下全部获取然后在前端进行分页 直接上代码,我的数组中为了测试内容是这样的 1.html代码 循环的currentPageData是每页...
  • 主要为大家详细介绍了Vue+ElementUI table实现表格分页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue table+分页

    千次阅读 2019-05-16 16:52:00
    Vue2.0+ElementUI+PageHelper实现的表格分页前言最近做了一些前端的项目,要对表格进行一些分页显示。表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部...
  • vue iview Table 表格实现分页效果

    千次阅读 2020-06-23 11:26:59
    <...div class="table"> <Table :columns="columns" :data="pageData" :border="true" > <Page :total="progressData.length" :current="page" :page-size="30" show-total
  • 主要为大家详细介绍了vue+elementUI组件table实现前端分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1. template分页 <el-pagination :page-size="fileListFrom.pageSize" :current-page="fileListFrom.pageNum" :page-sizes="[10, 50, 100, 200, 300, 500, 1000]" layout="total, sizes, prev, pager, next, ...
  • 小记:vue实现table分页功能

    千次阅读 2018-06-25 16:58:27
    现在可以实现分页功能了,但是还有一个很明显的问题,那就是这个分页只有在点击页码的时候才会实现,刚开始看到的就是全部的数据。这是不满足需求的,我们要从开始到结束每页的数据都是在十行以内的,不可以多。 ...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 372
精华内容 148
关键字:

vue实现table分页

vue 订阅