vue左树右表联动

实现Vue左树右表联动可以分为以下步骤：

1. 定义树形结构数据：定义一个树形结构的数据，可以使用Vue中的data属性，或者从后端获取数据。

2. 实现左侧树形菜单：使用Vue的v-for指令循环遍历树形结构数据，渲染出左侧树形菜单。

3. 点击左侧树形菜单节点：使用Vue的v-on指令绑定点击事件，获取当前点击节点的ID值，根据ID值获取该节点下的表格数据。

4. 渲染右侧表格：使用Vue的v-for指令循环遍历获取到的表格数据，渲染出右侧表格。

5. 实现数据联动：在点击左侧树形菜单节点时，获取到该节点下的表格数据后，将数据与右侧表格进行联动，渲染出对应的数据。

6. 实现表格分页：如果表格数据较多，可以使用Vue的分页插件对表格进行分页，提高用户体验。

示例代码如下：

<template>
  <div class="container">
    <div class="left-menu">
      <ul>
        <li v-for="item in treeData" :key="item.id" @click="handleClick(item.id)">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="right-table">
      <table>
        <thead>
          <tr>
            <th>名称</th>
            <th>类型</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.createTime }}</td>
          </tr>
        </tbody>
      </table>
      <vue-pagination :perPage="perPage" :total="total" v-model="currentPage" @change="handlePageChange" />
    </div>
  </div>
</template>

<script>
import VuePagination from 'vue-pagination'

export default {
  components: { VuePagination },
  data() {
    return {
      treeData: [], // 树形结构数据
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      perPage: 10, // 每页显示条数
      total: 0, // 总条数
    }
  },
  methods: {
    // 点击树形菜单节点
    async handleClick(id) {
      // 根据ID值获取该节点下的表格数据
      const res = await this.$http.get(`/api/getTableData?id=${id}&page=${this.currentPage}&perPage=${this.perPage}`)
      this.tableData = res.data.data
      this.total = res.data.total
    },
    // 表格分页变化事件
    async handlePageChange(page) {
      // 根据当前页码获取表格数据
      const res = await this.$http.get(`/api/getTableData?id=${id}&page=${page}&perPage=${this.perPage}`)
      this.tableData = res.data.data
      this.currentPage = page
    },
  },
  mounted() {
    // 获取树形结构数据
    this.treeData = [
      {
        id: 1,
        name: '节点1',
      },
      {
        id: 2,
        name: '节点2',
      },
      {
        id: 3,
        name: '节点3',
      },
    ]
  },
}
</script>

<style>
.container {
  display: flex;
  justify-content: space-between;
}
.left-menu {
  width: 200px;
}
.right-table {
  flex: 1;
}
</style>