用element-ui之el-form、el-table、el-pagination组件实现列表展示和查询条件的渲染

最新推荐文章于 2024-08-09 10:46:42 发布

一波又起

最新推荐文章于 2024-08-09 10:46:42 发布

阅读量4.7k

点赞数

分类专栏： element-ui 表格表单文章标签： el-form el-table el-pagination

本文链接：https://blog.csdn.net/qq_37126704/article/details/86716113

版权

本文详细介绍了如何在Vue项目中使用Element-UI的el-form、el-table和el-pagination组件，实现动态渲染查询条件并展示数据列表的功能。通过el-form处理用户输入，el-table展示数据，el-pagination提供分页导航，从而构建出高效的数据管理界面。

摘要由CSDN通过智能技术生成

src/views/oms/print/label/Index.vue

<template>
    <div>
      <el-card>
        <div slot="header" class="clearfix">
          <span>标签</span>
        </div>
        <el-row>
          <el-col :span="24">
              <el-form ref="searchForm" class="el-form-col search-form" :model="search">
                <el-row :gutter="15">
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="orderNo" >
                      <el-input v-model="search.orderNo" type="textarea" :rows="4" clearable
                                placeholder="关联订单  (支持多单查询，用英文逗号分隔)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="consigneName">
                      <el-input v-model="search.consigneName" placeholder="客户姓名" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="consignePhone">
                      <el-input v-model="search.consignePhone" placeholder="客户电话" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="cargoOwnerName">
                      <el-input v-model="search.cargoOwnerName" placeholder="商家名称" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
                    <el-form-item>
                      <el-row class="search-btns" :gutter="5">
                        <el-col :span&