在vue3 中使用vue-i18n 实现 DataV 轮播表国际化切换

    大屏项目中运用到了DataV插件，需要用vue-i18n对大屏页面进行国际化切换。

    其中静态文字直接在<template>中使用{{t(参数名)}}就可以进行切换，但是dv-scroll-board中的表头数据却并且切换。

    主要原因是vue-i18n并不会对setup内的数据进行一个监听，仅仅只是重新渲染html的内容，因此在这里需要使用computed或者watch来对相关数据进行监听，或者直接window.location进行初始化。

   但是问题在于，我不希望重新调用接口，而轮播表的组件参数，如果整体使用computed来监听就会导致表单内容清空，因此需要将组件参数进行处理。

 

<template>
<dv-scroll-board
                :config="configWork"
                ref="workExpress"
                style="width: 100%; height: 100%"/>
</template>

<script setup>
import {
  ref, reactive, onMounted, inject, computed,
  watch,
} from 'vue';
import { useI18n } from 'vue-i18n-composable';
const { t } = useI18n();

const configWorkList = reactive({
  data: [],
});
const configWork = reactive(computed(() => ({
  indexHeader: '序号',
  oddRowBGC: 'transparent', // 奇数行背景色
  evenRowBGC: 'transparent', // 偶数行背景色
  headerBGC: 'rgb(91, 155, 213)', // 表头背景色
  header: [t('WorkOrderNumber'), t('CustomerName'), t('ProductName'), t('NumberRequiredItems'), t('ImportantSort'), t('ProcessProgress')],
  rowNum: 5, // 表行数
  headerHeight: 35,
  carousel: 'page',
  waitTime: 5000, // 轮播时间间隔(ms)
  align: ['center', 'center', 'center', 'center', 'center', 'left'],
  columnWidth: [140, 100, 100, 90, 90, 500],
  data: configWorkList.data,  //将赋给data的值单独拿出来
})));


</script>