vue 实现基础查询筛选与分页

发表于 | 更新于 | 分类于 | 评论数：

问题与思路

问题：在数据量有限的情况下（1k 条以内）仅使用前端完成排序、分页操作

思路：

  • 将查询条件与分页情况放在 queryData:{} 对象中；
  • 将原始数据放在 origin_table_data 数组中；
  • 将条件筛选过的数据放在 computed:{computed_table:...} 中；
  • 在 watch:{} 中添加对 computed_table 与当前页码的监视，并在变动后刷新当前页面；

部分代码示例

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- 查询条件 -->
<Form :label-width="100">
  <Row>
    <Col span="8">
      <FormItem label="设备编号:">
        <Input v-model="queryData.deviceId" placeholder="设备编号" clearable/>
      </FormItem>
    </Col>
    <Col span="8">
      <FormItem label="名称:">
        <Input v-model="queryData.name" placeholder="名称" clearable/>
      </FormItem>
    </Col>
    <Col span="8">
      <FormItem label="厂家:">
        <Input v-model="queryData.manufacturer" icon="help" placeholder="厂家" disabled>
        </Input>
      </FormItem>
    </Col>
  </Row>
  <Row>
    <Col span="8">
      <FormItem label="在线状态:">
        <Select v-model="queryData.online">
          <Option value="">全部</Option>
          <Option v-for="item in onlineStatusCollection" :value="item.KEY" :key="item.KEY">{{ item.VALUE }}
          </Option>
        </Select>
      </FormItem>
    </Col>
  </Row>
</Form>

<!-- 数据表 -->
<Row>
  <Col span="24">
    <Table stripe border :loading="loading" ref="selection" :columns="columns" :data="table_data"
           style="margin-top:10px;" @on-selection-change='selectTableRow'>
    </Table>
  </Col>
</Row>

<!-- 页码栏 -->
<Row>
  <Col span="page" offset="8">
    <Page :current="queryData.currpage" :total="queryData.total" :page-size="queryData.limit" @on-change="handleChange" show-total
          show-elevator></Page>
  </Col>
</Row>

vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
export default {
    data() {
      return {
        //查询相关数据
        queryData: {
          deviceId: "",
          channelId: "",
          name: "",
          manufacturer: "",//厂家
          online: "",//在线状态
          currpage: 1, // 当前页码
          limit: 10, // 每页条数
          total: 1 // 数据总数
        },
        origin_table_data: [],//原始数据
        table_data: [],//分页展示数据
      };
    },
    computed: {
      /**
       * 计算条件筛选后的 table_data
       */
      computed_table: function () {
        let value = this.origin_table_data;
        let computedTable = [];
        let queryData = this.queryData;
        for (let i in value) {
          let checkDeviceId = queryData.deviceId == "" || (value[i].deviceId != null && value[i].deviceId.indexOf(queryData.deviceId) > -1);
          let checkName = queryData.name == "" || (value[i].name != null && value[i].name.indexOf(queryData.name) > -1);
          let checkManufacturer = queryData.manufacturer == "" || (value[i].manufacturer != null && value[i].manufacturer.indexOf(queryData.manufacturer) > -1);
          let checkOnline = queryData.online == "" || value[i].online == queryData.online;
          if (checkDeviceId && checkName && checkOnline && checkManufacturer) {
            computedTable.push(value[i]);
          }
        }
        queryData.total = computedTable.length;
        console.log("数据过滤刷新成功", computedTable);
        return computedTable;
      }
    },
    watch: {
      computed_table:{
        handler:function () {
          //数据变动将重置页码
          this.queryData.currpage = 1;
          this.computePage();
        },
        deep:false //不需要每个元素变动都刷新
      },
      'queryData.currpage': function(){this.computePage();},
    },
    methods: {
      /**
       * 分页计算
       */
      computePage(){
        let computedTable = this.computed_table;
        let queryData = this.queryData;
        let pagedComputedTable = [];
        for (let i = (queryData.currpage - 1) * queryData.limit; i < computedTable.length && i < queryData.currpage * queryData.limit; i++) {
          pagedComputedTable.push(computedTable[i]);
        }
        this.table_data = pagedComputedTable;
        console.log("数据分页成功", pagedComputedTable);
      },
  };