如何实现点击表格名称时将单个用户数据传递至模态框组件？

核心思路 #

通过在父组件中维护当前选中用户的状态，点击名称时将该用户数据存入状态，再传递给模态框子组件，而非传递全部数据。

修改步骤及代码 #

1. 父组件调整

• 添加selectedUser数据属性存储当前选中用户
• 修改表格字段的点击事件，传递并保存点击的用户数据
• 更新模态框的绑定属性为选中用户

<template>
  <b-container>
    <b-card class="mt-4">
      <b-table
        :items="dataItems"
        :fields="fields"
        :per-page="[5, 10]"
        sort-desc
        primary-key="id"
      />
    </b-card>
    <!-- 传递选中的单个用户数据 -->
    <data-modal ref="dataModal" :selected-user="selectedUser"/>
  </b-container>
</template>

<script>
import {axiosComponent} from '@/axios/services';
import DataModal from '@/components/DataModal';

export default {
  components: {
    DataModal
  },

  data() {
    return {
      dataItems: null,
      selectedUser: null // 新增：存储当前选中的用户
    };
  },
  computed: {
    fields() {
      return [
        {
          key: 'nameOfperson',
          label: 'name',
          sortable: true,
          // 修改点击事件：接收当前点击的用户item，保存后打开模态框
          click: (item) => {
            this.selectedUser = item;
            this.$refs.dataModal.show();
          }
        },
        {
          key: 'ageOfPerson',
          label: 'Age',
          sortable: true
        },
      ]
    },
  },
  methods: {
    load(){
      axiosComponent.getData().then(result => {
        this.dataItems = result.data
      })
    }
  },
  created() {
    this.load()
  }
};
</script>

2. 子组件（模态框）调整

• 修改props类型为单个用户对象
• 调整模板展示单个用户的具体数据

<template>
  <b-modal v-model="showModal">
    <!-- 判断选中用户存在时再渲染 -->
    <div v-if="selectedUser">
      <!-- 直接展示单个用户的属性 -->
      <p>姓名：{{ selectedUser.nameOfperson }}</p>
      <p>年龄：{{ selectedUser.ageOfPerson }}</p>
      <!-- 如果需要动态展示所有属性，可以用以下方式 -->
      <!-- <div v-for="(value, key) in selectedUser" :key="key">
        {{ key }}: {{ value }}
      </div> -->
    </div>
  </b-modal>
</template>

<script>
export default {
  props: {
    // 修改为接收单个用户对象
    selectedUser: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    show(){
      this.showModal = true
    }
  }
};
</script>

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