Vue中MDBootstrap Datatable如何修改tableData的rows数据？

我来帮你搞定这个Datatable数据更新的问题～你遇到的核心问题是Vue响应式系统的属性更新检测，直接在初始化时把rows绑定到this.data是一次性的，后续data变化时不会自动同步到tableData.rows，接下来给你具体的解决步骤和修改后的代码：

问题原因 #

你初始化tableData时rows: []是一个空数组，之后如果只是给this.data赋值，tableData.rows并不会自动跟着变——因为Vue的响应式是基于初始化时的属性定义和后续的属性赋值操作，而不是初始化时的引用关联。

解决方案 #

方案一：直接更新tableData.rows（最简单高效） #

在获取到服务器返回的数据后，直接把数据赋值给tableData.rows，这样Vue能立刻检测到属性变化，触发Datatable重新渲染：

修改你的created钩子函数：

created() {
  this.$store
    .dispatch('allCompanies')
    .then(() => {
      // 直接将服务器数据赋值给tableData的rows属性
      this.tableData.rows = this.$store.getters.getAllCompanies;
    })
    .catch(() => {
      this.customerErrors = this.$store.getters.customerError;
    });
}

方案二：通过watch监听data变化（适合需要保留data变量的场景） #

如果你需要保留this.data变量做其他用途，可以添加一个watch监听data的变化，同步更新tableData.rows：

data: () => ({
  data: [],
  tableData: { /* 你的columns和rows定义 */ }
}),
watch: {
  // 监听data的变化
  data(newData) {
    // 同步更新tableData.rows，展开运算符确保生成新数组触发响应式
    this.tableData.rows = [...newData];
  }
},
created() {
  this.$store
    .dispatch('allCompanies')
    .then(() => {
      this.data = this.$store.getters.getAllCompanies;
    })
    .catch(() => {
      this.customerErrors = this.$store.getters.customerError;
    });
}

修改后的完整代码示例 #

<template>
  <div class="container-fluid">
    <ProgressSpinner v-if="isLoading"/>
    <mdb-datatable :data="tableData" striped bordered/>
  </div>
</template>
<script>
import ProgressSpinner from './Preloader'
import { mdbDatatable } from 'mdbvue'
export default {
  name: 'Companies',
  data: () => ({
    tableData: {
      columns: [
        { label: 'ID', field: 'id', sort: 'asc' },
        { label: 'Name', field: 'name' },
        { label: 'Phone', field: 'phone', sort: 'asc' },
        { label: 'Email', field: 'email', sort: 'asc' },
        { label: 'City', field: 'city', sort: 'asc' },
        { label: 'Join Date', field: 'joined_at' }
      ],
      rows: []
    },
    customerErrors: ''
  }),
  created() {
    this.$store
      .dispatch('allCompanies')
      .then(() => {
        // 直接更新tableData的rows
        this.tableData.rows = this.$store.getters.getAllCompanies;
      })
      .catch(() => {
        this.customerErrors = this.$store.getters.customerError;
      });
  },
  computed: {
    isLoading() {
      return this.$store.getters.customersAreLoading;
    },
  },
  components: {
    ProgressSpinner,
    mdbDatatable
  },
  mounted() {
    $('.container-fluid').bootstrapMaterialDesign();
  }
}
</script>

关键提示 #

• 不需要同时导入DataTable和mdbDatatable，保留mdbDatatable即可（因为你用的是mdb-datatable组件）
• 直接修改tableData.rows是最直接的方式，Vue会自动检测到这个属性的变化并更新组件
• 如果数据是复杂对象，确保服务器返回的字段和columns里的field完全匹配，否则Datatable不会正确渲染数据

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