Vue+element ui表格数据显示、分页、搜索、全数据排序、日期范围筛选

　　设计思路：1、先从后端获得数据，存入json数组tableData中；2、经筛选处理后的数据存到tableDataEnd里，并在表格中显示；3、element默认的排序只对当前页数据排序，需要重写排序方法，对tableData或tableDataEnd进行排序；4、tableData中的日期数据用字符串表示，格式"YYYY-MM-DD"，搜索时要将前端的日期选择器获得的日期转成字符串，然后比较。全部代码如下：

  1 <template>
  2 <div id="test">
  3     <div>
  4       <div class="searchWord">
  5             <el-input v-model="search" prefix-icon="el-icon-search" style="display: inline-block;width: 300px"
  6                 placeholder="请输入搜索内容">
  7             </el-input>
  8             <el-button @click="doFilter">搜索</el-button>
  9 
 10           <div class="af" style="width:700px">
 11             <span class="bf">搜索字段选择：</span>
 12             <el-checkbox-group v-model="form.tagscheck">
 13                <el-checkbox v-for="item in form.tagslist" :label="item.id" :key="item.id">{{item.title}}</el-checkbox>
 14             </el-checkbox-group>
 15           </div>
 16         
 17           <div class="cf">
 18             <span>日期选择：</span>
 19             <el-date-picker
 20               v-model="value2"
 21               type="daterange"
 22               align="right"
 23               unlink-panels
 24               range-separator="至"
 25               start-placeholder="开始日期"
 26               end-placeholder="结束日期"
 27               :picker-options="pickerOptions">
 28             </el-date-picker>
 29           </div>
 30           
 31         </div>
 32     <el-table :data="tableDataEnd" 
 33             @sort-change="sort_change"
 34             ref="multipleTable"
 35             element-loading-text="拼命加载中......"
 36             :header-cell-style="{
 37             'background-color': '#1989fa',
 38             'color': '#fff',
 39             'font-weight': '400'
 40             }">
 41         
 42         <el-table-column prop="drawingno" label="图号" width="210" sortable></el-table-column>
 43         <el-table-column prop="fileno" label="卷册号" width="210" sortable></el-table-column>
 44         <el-table-column prop="version" label="版本" width="100" sortable></el-table-column>
 45         <el-table-column prop="filename" label="名称" width="250" sortable>
 46          
 47         </el-table-column>
 48         <el-table-column prop="company" label="来文单位" width="200" sortable></el-table-column>
 49         <el-table-column prop="date" label="来文日期" width="100" sortable></el-table-column>
 50         <el-table-column prop="category" label="专业" width="90" sortable></el-table-column>
 51         <el-table-column prop="remarks" label="备注" width="90" sortable></el-table-column>
 52   </el-table>
 53   </div>
 54   <div class="block" style="margin-left:20%">
 55   <el-pagination
 56       layout="total, sizes, prev, pager, next, jumper"
 57       @current-change="current_change"
 58       @size-change="handleSizeChange"
 59       :total="total"
 60       background
 61       >
 62   </el-pagination>
 63   </div>
 64 </div>
 65 </template>
 66 <script>
 67 
 68 export default{
 69   name:"Drawing",
 70   data:()=>{
 71       return{
 72         tableData:[{drawingno:'n',fileno:'2',version:'A',filename:'测试',company:'华东设计院',date:'日期',category:'专业',remark:'备注'},
 73                 {drawingno:'z',fileno:'2',version:'A',filename:'测试',company:'华东设计院',date:'日期',category:'专业',remark:'备注'}],
 74         total:1000,//默认数据总数
 75         pagesize:10,//每页的数据条数
 76         currentPage:1,//默认开始页面
 77         showData:[],
 78         search: '',
 79         tableDataEnd: [],
 80         filterTableDataEnd: [],
 81         flag: false,
 82         form: {
 83             tagscheck:["drawingno"],
 84             tagslist: [{id:"drawingno",title:"图号"},{id:"fileno",title:"卷册号"},{id:"filename",title:"名称"},
 85                        {id:"version",title:"版本"},{id:"company",title:"来文单位"},
 86                        {id:"category",title:"专业"},{id:"remarks",title:"备注"}],
 87            },
 88                 pickerOptions: {
 89         shortcuts: [{
 90             text: '最近一周',
 91             onClick(picker) {
 92               const end = new Date();
 93               const start = new Date();
 94               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 95               picker.$emit('pick', [start, end]);
 96             }
 97           }, {
 98             text: '最近一个月',
 99             onClick(picker) {
100               const end = new Date();
101               const start = new Date();
102               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
103               picker.$emit('pick', [start, end]);
104             }
105           }, {
106             text: '最近三个月',
107             onClick(picker) {
108               const end = new Date();
109               const start = new Date();
110               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
111               picker.$emit('pick', [start, end]);
112             }
113           }]
114         },
115         value2: ''   
116       };
117     },
118   computed: {
119      
120   },
121   watch:{
122    
123   },
124   methods:{
125     current_change:function(currentPage){
126         this.currentPage = currentPage;
127         if(!this.flag){
128             this.currentChangePage(this.tableData)
129           }else{
130             this.currentChangePage(this.filterTableDataEnd)  
131           }
132       },
133     handleSizeChange(val) {
134         this.pagesize = val
135         this.handleCurrentChange(this.currentPage);
136       },
137     req(){
138        var that=this;
139        this.$axios.get("/access/drawing").then(res=>{
140          that.tableData=res.data;
141          that.filterTableDataEnd=res.data;
142          that.total=res.data.length;
143          that.currentChangePage(res.data);
144        }).catch(err=>{
145          alert("数据库连接出错啦！");
146        });     
147      },
148      doFilter (){
149         this.tableDataEnd = [];
150         this.filterTableDataEnd=[];
151         this.search=this.search.toLowerCase();
152         this.tableData.forEach((value, index) => {
153           if(value.drawingno){
154             if((this.form.tagscheck.indexOf("filename")>=0 & value.filename.toLowerCase().indexOf(this.search)>=0)
155               ||(this.form.tagscheck.indexOf("drawingno")>=0 & value.drawingno.toLowerCase().indexOf(this.search)>=0)
156               ||(this.form.tagscheck.indexOf("fileno")>=0 & value.fileno.toLowerCase().indexOf(this.search)>=0)
157               ||(this.form.tagscheck.indexOf("version")>=0 & value.version.toLowerCase().indexOf(this.search)>=0)
158               ||(this.form.tagscheck.indexOf("company")>=0 & value.company.toLowerCase().indexOf(this.search)>=0)
159               ||(this.form.tagscheck.indexOf("category")>=0 & value.category.toLowerCase().indexOf(this.search)>=0)
160               ||(this.form.tagscheck.indexOf("remarks")>=0 & value.remarks.toLowerCase().indexOf(this.search)>=0)
161               ){
162                 if(this.value2 != null & this.value2 != ''){
163                   var startDate=this.value2[0].getFullYear()+'-'+((this.value2[0].getMonth()+1)<10? '0'+(this.value2[0].getMonth()+1) : (this.value2[0].getMonth()+1))+'-'+(this.value2[0].getDate()<10? '0'+this.value2[0].getDate() : this.value2[0].getDate());
164                   var endDate=this.value2[1].getFullYear()+'-'+((this.value2[1].getMonth()+1)<10? '0'+(this.value2[1].getMonth()+1) : (this.value2[1].getMonth()+1))+'-'+(this.value2[1].getDate()<10? '0'+this.value2[1].getDate() : this.value2[1].getDate());
165                  
166                   if(value.date >= startDate & value.date <= endDate){
167                     this.filterTableDataEnd.push(value)
168                   }
169 
170                 }else{
171                     this.filterTableDataEnd.push(value)
172                 }
173             
174             }
175           }
176         });
177         this.currentPage=1;
178         this.total=this.filterTableDataEnd.length;
179         this.currentChangePage(this.filterTableDataEnd);
180         this.flag=true;
181      },
182      handleCurrentChange(val){
183         this.currentPage = val;
184         //需要判断是否检索
185         if(!this.flag){
186            this.currentChangePage(this.tableDataEnd)
187           }else{
188         this.currentChangePage(this.filterTableDataEnd)  
189       }
190      },
191      currentChangePage (list){
192         let from = (this.currentPage - 1) * this.pagesize;
193         let to = this.currentPage * this.pagesize;
194         this.tableDataEnd = [];
195         for (; from < to; from++) {
196             if (list[from]) {
197               this.tableDataEnd.push(list[from]);
198             }
199         }
200      },
201   sortFun: function (attr, rev) {
202             //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
203             if (rev == undefined) {
204                 rev = 1;
205             } else {
206                 rev = (rev) ? 1 : -1;
207             }
208  
209             return function (a, b) {
210                 a = a[attr];
211                 b = b[attr];
212                 if (a < b) {
213                     return rev * -1;
214                 }
215                 if (a > b) {
216                     return rev * 1;
217                 }
218                 return 0;
219             }
220         },
221     sort_change(column) {
222       this.currentPage = 1;
223       if (column.prop === 'drawingno') {
224              this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
225              this.currentChangePage(this.tableData);
226           }else if(column.prop === 'date'){
227             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
228             this.currentChangePage(this.tableData);
229           }else if(column.prop === 'version'){
230             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
231             this.currentChangePage(this.tableData);
232           }else if(column.prop === 'fileno'){
233             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
234             this.currentChangePage(this.tableData);
235           }else if(column.prop === 'filename'){
236             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
237             this.currentChangePage(this.tableData);
238           }else if(column.prop === 'company'){
239             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
240             this.currentChangePage(this.tableData);
241           }else if(column.prop === 'category'){
242             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
243             this.currentChangePage(this.tableData);
244           }else if(column.prop === 'remarks'){
245             this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
246             this.currentChangePage(this.tableData);
247           }
248     }
249   },
250   created:function(){
251          this.req();
252       },   
253 };
254 </script>
255 <style>
256   .af{
257     display:inline-block;
258     width:700px;
259     font-size: 14px;
260   }
261   .bf{
262     float:left;
263   }
264   .cf{
265     float:left;
266     font-size: 14px;
267     vertical-align: center;
268     margin: 10px,10px,20px,20px;
269   }
270 </style>

View Code

1、从后端请求加载数据用自定义函数req()实现，然后用自定义函数currentChangePage(list)将数据存入tableDataEnd。

2、在搜索框中输入搜索内容时，结合所选中的字段判断搜索关键字是否包含在json数组的记录中，如果选择了日期范围，则要比较日期值。这里要注意时间转换成字符串的格式。其中的月份和日期如果小于10则应该添加一个0。

var startDate=this.value2[0].getFullYear()+'-'+((this.value2[0].getMonth()+1)<10? '0'+(this.value2[0].getMonth()+1) : (this.value2[0].getMonth()+1))+'-'+(this.value2[0].getDate()<10? '0'+this.value2[0].getDate() : this.value2[0].getDate());
var endDate=this.value2[1].getFullYear()+'-'+((this.value2[1].getMonth()+1)<10? '0'+(this.value2[1].getMonth()+1) : (this.value2[1].getMonth()+1))+'-'+(this.value2[1].getDate()<10? '0'+this.value2[1].getDate() : this.value2[1].getDate());

3、要对所有数据排序，则要增加两个自定义函数sortFun和sort_change。

posted @ 2021-02-26 11:34 wwwzgy 阅读(1218) 评论(0) 收藏举报

刷新页面返回顶部

Vue+element ui表格数据显示、分页、搜索、全数据排序、日期范围筛选

公告