el-tree（包含多层级子节点） 结合 el-table（分页表格）实现双向绑定 （支持表格全选当前页 支持表格分页全选 需要后端配合）

要实现el-tree与el-table的双向绑定，并支持表格的全选功能，你可以使用Vue.js和Element UI来创建这样的一个组件。以下是一个简化的示例：

<template>
  <div>
    <el-tree
      :data="treeData"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      @check-change="handleCheckChange"
    />
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // ... 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: [],
      selectedTreeNodes: []
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      // 当树节点选中状态变化时，更新表格数据
      if (checked) {
        this.tableData = [...this.tableData, ...this.getRelatedTableData(data)];
      } else {
        this.tableData = this.tableData.filter(item => item.id !== data.id);
      }
    },
    handleSelectionChange(selection) {
      // 当表格选中状态变化时，更新树节点选中状态
      this.selectedTreeNodes = selection;
    },
    getRelatedTableData(node) {
      // 获取与节点相关的表格数据
      // 实现细节根据你的数据结构来定
      return [/* 节点相关的表格数据 */];
    }
  }
};
</script>

在这个示例中，el-tree组件使用show-checkbox属性来显示复选框，用户可以通过点击复选框来选择节点。当节点的选中状态发生变化时，通过@check-change事件处理函数handleCheckChange来更新表格数据。同时，el-table组件使用@selection-change事件来监听表格的选中状态变化，并更新树节点的选中状态。

注意：示例中的getRelatedTableData方法需要根据你的数据结构来实现，以便正确地获取与树节点相关的表格数据。此外，表格的全选功能不需要特别实现，因为el-table的selection-change事件已经能够捕获所有选中项的变化。