Vue.js Bootstrap Table行数控制：跨组件复选框切换显示行

实现思路 #

通过控制表格数据源的渲染范围，结合跨组件状态通信来实现需求：默认只渲染第一行数据，当其他组件的复选框被勾选时，切换为渲染全部数据。

步骤1：准备状态通信方式 #

因为表格和复选框在不同组件，需要用跨组件通信同步状态。这里提供两种常用方案：

• 小型项目：用Vue事件总线
• 中大型项目：用Vuex状态管理

事件总线初始化（可选）

如果用事件总线，先在项目入口文件（比如main.js）注册：

Vue.prototype.$bus = new Vue()

步骤2：表格组件处理数据渲染 #

在表格组件中，根据同步过来的状态，动态截取数据源：

<template>
  <b-table hover small responsive bordered stacked
           :fields="fields"
           :items="displayItems">
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      fields: ['字段1', '字段2', ...], // 替换为实际字段配置
      items: [/* 你的完整表格数据 */],
      showAllRows: false // 默认不显示全部行
    }
  },
  computed: {
    displayItems() {
      // 状态为false时只取第一行，为true时取全部数据
      if (!this.showAllRows && this.items.length > 0) {
        return [this.items[0]]
      }
      return this.items
    }
  },
  created() {
    // 监听复选框的状态切换事件
    this.$bus.$on('toggleTableRows', (status) => {
      this.showAllRows = status
    })
  },
  beforeDestroy() {
    // 组件销毁前移除监听，避免内存泄漏
    this.$bus.$off('toggleTableRows')
  }
}
</script>

步骤3：复选框组件触发状态变更 #

在包含复选框的组件中，绑定切换事件，向表格组件发送状态：

<template>
  <div>
    <input type="checkbox" id="showAll" @change="handleToggle">
    <label for="showAll">显示全部行</label>
  </div>
</template>

<script>
export default {
  methods: {
    handleToggle(e) {
      // 通过事件总线发送当前复选框状态
      this.$bus.$emit('toggleTableRows', e.target.checked)
    }
  }
}
</script>

（可选）Vuex方案示例 #

如果项目使用Vuex，状态管理会更清晰：

1. 在Vuex的state中添加状态：

state: {
  showTableAllRows: false
}

2. 添加mutation：

mutations: {
  SET_SHOW_ALL_ROWS(state, status) {
    state.showTableAllRows = status
  }
}

3. 表格组件中通过mapState获取状态，计算渲染数据：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['showTableAllRows']),
    displayItems() {
      return this.showTableAllRows ? this.items : (this.items.length ? [this.items[0]] : [])
    }
  }
}

4. 复选框组件中通过mapMutations触发状态变更：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['SET_SHOW_ALL_ROWS']),
    handleToggle(e) {
      this.SET_SHOW_ALL_ROWS(e.target.checked)
    }
  }
}

效果验证 #

• 默认状态：表格仅展示第一行数据
• 勾选复选框：表格立即展示所有行数据

内容的提问来源于stack exchange，提问作者monny