Vue+elementui表格数据显⽰、分页、搜索、全数据排序、⽇期范围筛选
设计思路：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"
6 placeholder="请输⼊搜索内容">
7 </el-input>
8 <el-button @click="doFilter">搜索</el-button>
9
10 <div class="af" >
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" >
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:()=>{
71return{
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.Time() - 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.Time() - 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.Time() - 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){
126this.currentPage = currentPage;
127if(!this.flag){
128this.currentChangePage(this.tableData)
129 }else{
130this.currentChangePage(this.filterTableDataEnd)
131 }
132 },
133 handleSizeChange(val) {
134this.pagesize = val
135this.handleCurrentChange(this.currentPage);
136 },
137 req(){
138var that=this;
139this.$("/access/drawing").then(res=>{
140 that.tableData=res.data;
141 that.filterTableDataEnd=res.data;
142 al=res.data.length;
143 that.currentChangePage(res.data);
144 }).catch(err=>{
145 alert("数据库连接出错啦！");
146 });
147 },
148 doFilter (){
149this.tableDataEnd = [];
150this.filterTableDataEnd=[];
151this.search=LowerCase();
152this.tableData.forEach((value, index) => {
153if(value.drawingno){
154if((this.form.tagscheck.indexOf("filename")>=0 & LowerCase().indexOf(this.search)>=0)
155 ||(this.form.tagscheck.indexOf("drawingno")>=0 & LowerCase().indexOf(this.search)>=0)
156 ||(this.form.tagscheck.indexOf("fileno")>=0 & LowerCase().indexOf(this.search)>=0)
157 ||(this.form.tagscheck.indexOf("version")>=0 & LowerCase().indexOf(this.search)>=0)
158 ||(this.form.tagscheck.indexOf("company")>=0 & LowerCase().indexOf(this.search)>=0)
159 ||(this.form.tagscheck.indexOf("category")>=0 & LowerCase().indexOf(this.search)>=0)
160 ||(this.form.tagscheck.indexOf("remarks")>=0 & LowerCase().indexOf(this.search)>=0)
161 ){
162if(this.value2 != null & this.value2 != ''){
163var 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 164var 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 165
166if(value.date >= startDate & value.date <= endDate){
167this.filterTableDataEnd.push(value)
168 }
169
170 }else{
171this.filterTableDataEnd.push(value)
172 }
173
174 }
175 }
176 });
177this.currentPage=1;
179this.currentChangePage(this.filterTableDataEnd);
180this.flag=true;
181 },
182 handleCurrentChange(val){
183this.currentPage = val;
184//需要判断是否检索
185if(!this.flag){
186this.currentChangePage(this.tableDataEnd)
187 }else{
188this.currentChangePage(this.filterTableDataEnd)
189 }
190 },
191 currentChangePage (list){
192 let from = (this.currentPage - 1) * this.pagesize;
193 let to = this.currentPage * this.pagesize;
194this.tableDataEnd = [];
195for (; from < to; from++) {
196if (list[from]) {
197this.tableDataEnd.push(list[from]);
198 }
199 }
200 },
201 sortFun: function (attr, rev) {
202//第⼀个参数传⼊info⾥的prop表⽰排的是哪⼀列，第⼆个参数是升还是降排序
203if (rev == undefined) {
204 rev = 1;
205 } else {
206 rev = (rev) ? 1 : -1;
207 }
208
209return function (a, b) {
210 a = a[attr];
211 b = b[attr];
212if (a < b) {
tabletotal函数213return rev * -1;
214 }
215if (a > b) {
216return rev * 1;
217 }
218return 0;
219 }
220 },
221 sort_change(column) {
222this.currentPage = 1;
223if (column.prop === 'drawingno') {
224this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
225this.currentChangePage(this.tableData);
226 }else if(column.prop === 'date'){
227this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
228this.currentChangePage(this.tableData);
229 }else if(column.prop === 'version'){
230this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
231this.currentChangePage(this.tableData);
232 }else if(column.prop === 'fileno'){
233this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
234this.currentChangePage(this.tableData);
235 }else if(column.prop === 'filename'){
236this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
237this.currentChangePage(this.tableData);
238 }else if(column.prop === 'company'){
239this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
240this.currentChangePage(this.tableData);
241 }else if(column.prop === 'category'){
242this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
243this.currentChangePage(this.tableData);
244 }else if(column.prop === 'remarks'){
245this.tableData = this.tableData.sort(this.sortFun(column.prop, der === 'ascending'));
246this.currentChangePage(this.tableData);
247 }
248 }
249 },
250 created:function(){
252 },
253 };
254 </script>
255 <style>
256 .af{
257 display:inline-block;
258 width:700px;
259 font-size: 14px;
260 }
261 .bf{
262float:left;
263 }
264 .cf{
265float: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].get
Month()+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。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论