当前位置：首页 > VUE

vue实现多个table联动

2026-02-25 00:29:29VUE

实现多个 Table 联动的方法

在 Vue 中实现多个表格联动通常需要共享状态或事件通信。以下是几种常见方法：

使用 Vuex 状态管理

通过 Vuex 存储共享数据，实现表格间的状态同步：

// store.js
export default new Vuex.Store({
  state: {
    selectedRow: null,
    tableData: []
  },
  mutations: {
    setSelectedRow(state, payload) {
      state.selectedRow = payload
    }
  }
})

<!-- TableComponent.vue -->
<template>
  <table>
    <tr v-for="row in tableData" 
        @click="selectRow(row)"
        :class="{active: isSelected(row)}">
      <!-- 表格内容 -->
    </tr>
  </table>
</template>

<script>
export default {
  computed: {
    tableData() {
      return this.$store.state.tableData
    }
  },
  methods: {
    selectRow(row) {
      this.$store.commit('setSelectedRow', row)
    },
    isSelected(row) {
      return this.$store.state.selectedRow === row
    }
  }
}
</script>

使用事件总线通信

创建全局事件总线实现组件间通信：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- TableA.vue -->
<script>
import { EventBus } from './eventBus'

export default {
  methods: {
    handleRowClick(row) {
      EventBus.$emit('row-selected', row)
    }
  }
}
</script>

<!-- TableB.vue -->
<script>
import { EventBus } from './eventBus'

export default {
  created() {
    EventBus.$on('row-selected', (row) => {
      // 处理联动逻辑
    })
  }
}
</script>

使用 provide/inject

父组件提供数据，子组件注入使用：

vue实现多个table联动

<!-- ParentComponent.vue -->
<template>
  <div>
    <TableA />
    <TableB />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      sharedState: {
        selectedRow: null,
        setSelectedRow: this.setSelectedRow
      }
    }
  },
  methods: {
    setSelectedRow(row) {
      this.sharedState.selectedRow = row
    }
  }
}
</script>

<!-- TableA.vue -->
<script>
export default {
  inject: ['sharedState'],
  methods: {
    handleClick(row) {
      this.sharedState.setSelectedRow(row)
    }
  }
}
</script>

使用 v-model 和自定义事件

通过 props 和自定义事件实现父子组件通信：

<!-- ParentComponent.vue -->
<template>
  <div>
    <TableA v-model="selectedRow" />
    <TableB :selected="selectedRow" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRow: null
    }
  }
}
</script>

<!-- TableA.vue -->
<script>
export default {
  props: ['value'],
  methods: {
    handleRowClick(row) {
      this.$emit('input', row)
    }
  }
}
</script>

使用动态组件和 keep-alive

当需要保持表格状态时：

vue实现多个table联动

<template>
  <keep-alive>
    <component :is="currentTable" :sharedData="sharedData" />
  </keep-alive>
</template>

表格联动常见场景处理

行选择联动：

// 在选中行时更新其他表格
watch: {
  selectedRow(newVal) {
    this.$refs.otherTable.highlightRow(newVal)
  }
}

排序联动：

methods: {
  handleSortChange(column) {
    this.sortBy = column.prop
    this.sortOrder = column.order
    // 触发其他表格重新排序
    this.$refs.otherTable.sort(this.sortBy, this.sortOrder)
  }
}

分页联动：

methods: {
  handlePageChange(page) {
    this.currentPage = page
    // 更新所有关联表格的当前页
    this.tables.forEach(table => {
      table.currentPage = page
    })
  }
}