如何通过Vue Props为vue3-easy-data-table设置背景图片

我是VueJS新手，想用vue3-easy-data-table做一个可复用的BaseTable组件，希望能通过Props传入背景图片地址来修改表格无数据时的背景图，但试了多种方法都没成功，相关代码如下：

原错误代码 #

BaseTable.vue #

<template>
  <EasyDataTable>
...
  </EasyDataTable>
</template>

<script setup lang="ts">
  changeImg: {
    type: String,
  }
})

</script>

<style>
.vue3-easy-data-table__message {
  background-image: url("`${v-bind("changeImg")}`");
  /*  background-image: var(--image-url); */
  /* background-image: url('@/assets/img/noDataMultiplierOnCity.svg'); */
}
</style>

View.vue #

<template>
<BaseTable
  :changeImg= "image"
/>     
</template>

<script lang="ts" setup>
const image : string = "'@/assets/img/noDataMultiplierOnCity.svg'" 
</script>

问题修复步骤 #

1. 修正Props声明语法 #

Vue3 <script setup> 必须用 defineProps 来声明组件Props，原代码写法不符合规范。

2. 样式中正确绑定响应式值 #

Vue3 样式绑定不需要嵌套模板字符串，直接用 v-bind(表达式) 即可解析响应式变量。

3. 移除路径多余引号 #

View.vue 中 image 变量的路径被额外单引号包裹，导致路径变成字符串字面量，无法被Vue正确解析为资源路径。

修改后的正确代码 #

BaseTable.vue #

<template>
  <EasyDataTable>
    ...
  </EasyDataTable>
</template>

<script setup lang="ts">
// 正确声明Props，建议添加必填校验确保组件使用时传入值
defineProps({
  changeImg: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.vue3-easy-data-table__message {
  // 直接通过v-bind解析Props值
  background-image: v-bind(`url(${changeImg})`);
}
</style>

View.vue #

<template>
  <BaseTable :changeImg="image" />
</template>

<script lang="ts" setup>
// 移除路径外层的多余单引号
const image: string = '@/assets/img/noDataMultiplierOnCity.svg'
</script>

可选方案：使用CSS变量实现 #

如果觉得样式直接绑定不够直观，也可以通过CSS变量传递路径：

BaseTable.vue（CSS变量版） #

<template>
  <!-- 给根组件绑定CSS变量 -->
  <EasyDataTable :style="{'--table-bg-image': `url(${changeImg})`}">
    ...
  </EasyDataTable>
</template>

<script setup lang="ts">
defineProps({
  changeImg: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.vue3-easy-data-table__message {
  background-image: var(--table-bg-image);
}
</style>

内容的提问来源于stack exchange，提问作者Mu'adhim