基于Vue+ELement搭建动态树与数据表格实现分页模糊查询

以下是一个简化的Vue组件代码示例，展示了如何使用Vue和Element UI创建一个带有分页和模糊查询功能的树形数据表格。

<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键词进行过滤"
      prefix-icon="el-icon-search"
      clearable
      style="margin-bottom: 10px;"
    />
    <el-tree
      :data="filteredData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      class="filter-tree"
    />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredData.length"
    />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      filterText: '',
      data: [/* 初始数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    filteredData() {
      const filter = this.filterText.toLowerCase();
      const filtered = this.data.filter(item => item.label.toLowerCase().includes(filter));
      this.currentPage = 1;
      return filtered;
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.toLowerCase().includes(value.toLowerCase());
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

这段代码展示了如何使用Vue的计算属性来实现数据的动态过滤，以及使用Element UI的<el-input>和<el-pagination>组件来实现搜索和分页功能。计算属性filteredData根据搜索关键词对原始数据进行过滤，并在搜索文本变化时通过watcher更新树形控件的过滤条件。分页组件则通过事件处理函数handleSizeChange和handleCurrentChange来处理页面大小和页码的变化，实现数据的分页显示。