后端没有处理分页的情况下，前端用elementui处理分页的例子_后端不进行分页处理在前端显示分页的结果

<el-main>
          <div class="dormitory">
            <div class="searchWord">
              <div style="display: inline-block">搜索：</div>
              <el-input
                v-model="search"
                style="display: inline-block;width: 1300px"
                placeholder="请输入搜索内容"
              ></el-input>
            </div>
          </div>
           
          <el-table
          :data="tables.slice((currentPage - 1) * pagesize, currentPage*pagesize)"
           style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="hostid" label="hostid" width="180"></el-table-column>
            <el-table-column prop="host" label="host" width="180"></el-table-column>
          </el-table>
          <div class="block"  v-if="pageshow">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
               :current-page.sync="currentPage"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            ></el-pagination>
            <el-button @click="except">下载表格</el-button>
          </div>
        </el-main>
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

<script>
export default {
  data() {
    return {
      tableData2: [], //数据
      search: "",
      rows: 100, //每页显示100条数据
      page: 1, //当前页码
      count: 0, //总纪录条数
      pagesize: 10,
      currentPage: 1,
      options4: [],
      value9: [],
      list: [],
      loading: false,
      states: [],
      pageshow:true,
    };
  },
  computed: {
    // 模糊搜索
    tables() {
      const search = this.search;
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableData2.filter((data) => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData2;
    },
  },
  methods: {
    //导出数据为Excel
    except(){
       require.ensure([],()=>{
         const {export_json_to_excel}=require("../excel/Export2Excel")//excel地址
         const tHeader=["主机id","主机"]//表头
         const filterVal=['hostid','host']//对应数据字段
         const list=this.tableData2;//表数据
         const data=this.formatJson(filterVal,list)
         export_json_to_excel(tHeader,data,'主机信息')//表名
       })
    },
    formatJson(filterVal,jsonData){
        return jsonData.map(v=>filterVal.map(j=>v[j]))
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    axiosData() {
      const axios = require("axios");
      var datas = sessionStorage.getItem("data");
      axios
        .post("http://******", {
          jsonrpc: "2.0",
          method: "host.get",
          params: {
            output: ["hostid", "host"],
            selectInterfaces: ["interfaceid", "ip"],
          },
          id: 2,
          auth: datas,
        })
        .then((res) => {
          let resData = res.data.result;
          let resDatas = [];

          for (var i = 0; i < resData.length; i++) {
            this.options4.push(resData[i].hostid);
            resDatas.push(resData[i].host, resData[i].hostid);
            // this.states.push(res.data.result[i].hostid)
            // console.log(this.options4);
          
          }
  console.log(resData[1].interfaces[0].ip)
          console.log(res.data.result);
          console.log(res);

          this.tableData2 = res.data.result;
          this.count = res.data.result.length;

          console.log(this.tableData2);
          
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(page) {
      console.log(`当前页：${page}`)
      this.currentPage=page; //把当前页码赋给currentPage
    },

    //搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options4 = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options4 = [];
      }
    },
  },
  mounted() {
    var data = sessionStorage.getItem("data");
    if (!data) {
      this.$router.push({ name: "Login" });
    }
    this.axiosData();
    this.list = this.states.map((item) => {
      return { value: item, label: item };
    });
     this.$nextTick(() => {
     this.pageshow = true
 })
  
  },
  
};
</script>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146