如何实现vue表格联动

实现 Vue 表格联动的方法

数据绑定与响应式更新

在 Vue 中通过 v-model 或 :value 绑定表格数据源，利用 Vue 的响应式特性实现联动。当主表格数据变化时，通过 watch 监听数据变化并更新从属表格。

<template>
  <table>
    <tr v-for="item in mainTableData" :key="item.id">
      <td>{{ item.name }}</td>
    </tr>
  </table>
  <table>
    <tr v-for="detail in subTableData" :key="detail.id">
      <td>{{ detail.info }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      mainTableData: [],
      subTableData: []
    }
  },
  watch: {
    mainTableData(newVal) {
      this.updateSubTable(newVal)
    }
  }
}
</script>

事件驱动联动

通过自定义事件实现表格间通信。主表格触发 @click 或 @change 事件时，调用方法更新从属表格数据。

methods: {
  handleRowClick(rowData) {
    this.subTableData = rowData.children
  }
}

使用 Vuex 状态管理

对于复杂联动场景，采用 Vuex 集中管理表格状态。主表格提交 mutation 修改状态后，从属表格通过 getter 自动获取更新。

// store.js
mutations: {
  setMainTable(state, payload) {
    state.mainTable = payload
    state.subTable = payload.map(item => item.details)
  }
}

动态组件渲染

根据主表格选择项动态渲染不同的子表格组件，通过 :is 实现组件切换。

<component :is="currentSubTable" :data="subTableData"></component>

第三方表格组件集成

若使用 Element UI 或 Ant Design Vue 等库，可利用其内置的表格事件和 API。例如 el-table 的 @row-click 事件配合 expand-row-keys 实现展开行联动。

<el-table @row-click="handleExpand"></el-table>
<el-table :expand-row-keys="expandedRows"></el-table>