VueTableLite插槽(v-slot)不生效：Active列未按预期显示Yes/No

问题分析 #

你的插槽配置未生效主要存在两个核心问题：

1. 包装组件未传递插槽与属性：自定义的VueTable.vue包装组件没有将父组件传入的属性、事件及插槽传递给底层的VueTableLite组件，导致定义的插槽无法被实际渲染的表格组件识别。
2. 插槽数据访问路径错误：当前data.value.active的访问逻辑有误——插槽接收的value已经是对应列的字段值（即布尔值true/false），而非整个行对象。

解决方案 #

1. 更新包装组件VueTable.vue

修改VueTable.vue的模板，确保所有属性、事件和插槽都传递给底层的VueTableLite组件：

<script>
import VueTableLite from 'vue3-table-lite/ts'

export default {
  components: {
    VueTableLite,
  }
}
</script>

<template>
  <!-- 传递所有属性、事件和插槽给底层组件 -->
  <vue-table-lite v-bind="$attrs" v-on="$listeners" v-slots="$slots" />
</template>

2. 修正插槽数据访问逻辑

在父组件模板中，调整插槽内容的访问方式，直接使用data.value获取列的字段值：

<template>
<vue-table class="vue-table"
    :has-checkbox="false"
    :isSlotMode="true"
    :is-loading="table.isLoading"
    :columns="table.columns"
    :rows="table.rows"
    :total="table.totalRecordCount"
    :sortable="table.sortable"
    @is-finished="table.isLoading = false"
  >
    <!-- 修正Active列插槽逻辑 -->
    <template v-slot:active="data">
      {{ data.value ? 'Yes' : 'No' }}
    </template>

    <!-- 示例：Actions列插槽（访问整行数据） -->
    <template v-slot:actions="data">
      <button @click="handleEdit(data.item.id)">编辑</button>
      <button @click="handleDelete(data.item.id)">删除</button>
    </template>
  </vue-table>
</template>

3. 关键配置验证

• 确保columns数组中field的名称与插槽名称完全匹配（如active字段对应v-slot:active）。
• 确认isSlotMode已设置为true，这是启用插槽自定义渲染的必要开关。

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