Vue3父子组件如何捕获或同步props值？自定义datatable进度列传值问题

核心实现逻辑 #

你需要使用Vue3的作用域插槽特性，完成data-table父组件向插槽内progress-bar组件的响应式数据传递，同时可通过修改columns配置动态添加状态列，完整操作步骤如下：

步骤1：修改自定义data-table组件的插槽定义 #

在你自行实现的data-table组件内部，找到progress-bar插槽的渲染位置，将已计算完成的progress_val作为插槽属性向外暴露：

<!-- data-table 组件内部模板代码 -->
<template>
  <!-- 其他表格逻辑省略 -->
  <tr v-for="row in rows" :key="row.id">
    <td v-for="col in columns" :key="col.field">
      <!-- 如果列配置指定了插槽，则渲染对应插槽并传递数据 -->
      <slot 
        v-if="col.slot" 
        :name="col.slot" 
        :progress_val="progress_val" 
        :row="row" <!-- 可额外传递当前行数据，方便按行计算进度 -->
      ></slot>
      <span v-else>{{ row[col.field] }}</span>
    </td>
  </tr>
</template>

说明：如果你的progress_val是按行维度计算的，直接把对应行的进度值绑定到插槽属性即可，无需全局传值

步骤2：修改调用侧代码接收插槽数据 #

调整你贴出的调用代码，在插槽声明处接收data-table传递的属性：

<data-table
  :rows="state.rows"
  :columns="state.columns"
  :num_to_show="state.num_to_show"
  styleClass="tableOne vgt-table"
> 
  <!-- 解构接收作用域插槽传递的progress_val -->
  <template #progress-bar="{ progress_val }">
    <progress-bar :progress="progress_val"></progress-bar>
  </template> 
</data-table>

步骤3：动态添加状态列 #

直接修改响应式的state.columns数组，即可动态插入进度状态列：

// Vue3 脚本部分示例
import { reactive } from 'vue'

const state = reactive({
  rows: [],
  columns: [
    // 原有列配置省略
  ],
  num_to_show: 10
})

// 需要添加状态列时直接操作columns数组即可
const addStatusColumn = () => {
  state.columns.push({
    label: '处理状态',
    field: 'progress',
    slot: 'progress-bar', // 和你定义的插槽名对应
    width: '180px'
  })
}

说明：只要你的progress_val是用ref/reactive定义的响应式数据，更新后插槽内的progress-bar组件会自动接收最新值，无需额外监听

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