Vue+ElementUI实现动态树和表格数据的分页模糊查询

<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键词进行过滤"
      prefix-icon="el-icon-search"
      clearable
      @clear="clearSearch"
    ></el-input>
    <el-tree
      :data="filteredTreeData"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <el-table :data="data.tableData" style="width: 100%;">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </span>
    </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [
        // 树的原始数据
      ],
      // 其余的方法和计算属性定义...
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    clearSearch() {
      this.filterText = '';
      this.$refs.tree.filter('');
    }
  }
};
</script>

这个代码实例展示了如何在Vue组件中使用Element UI的el-input和el-tree组件来实现树的搜索过滤，以及如何在el-table中嵌入表格并展示数据。同时，代码中使用了计算属性和监听器来处理输入框的变化，以动态过滤树节点。