bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）
必须重新赋值整个config

方式一：检测到数据更新重新赋值config

 this.config1 = {
      data: arr,
      header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
      align: ["center", "center", "center", "center", "center"],
      columnWidth: [150],
      rowNum: 7,
      evenRowBGC: "rgba(33, 78, 133,.5)",
      oddRowBGC: "transparent",
      headerBGC: "",
      waitTime: 1000,
      headerHeight: "45",
 };

方式二：同理使用es6语法

this.config1.data = arr;
this.config1={...this.config1}

<template>
  <dv-scroll-board
    :config="
      type == 1 ? config1 : type == 2 ? config2 : type == 3 ? config3 : config4
    "
    ref="scrollBoard"
    class="w100 h100"
  />
</template>
<script>
export default {
  props: ["list", "type"],
  watch: {
    list: {
      handler(val) {
        // console.log("watch监听", val, this.type, 777777);
        if (val) {
          if (this.type == 1) {
            let arr = val.map((el) => {
              return [
                el.deptName,
                el.personName,
                el.postName,
                el.phoneNumber,
                `<span class="${
                  el.memberTypeName == "在岗"
                    ? "green1"
                    : el.memberTypeName == "培训" || el.memberTypeName == "出差"
                    ? "red1"
                    : el.memberTypeName == "休假" || el.memberTypeName == "轮休"
                    ? "yellow1"
                    : "blue1"
                }">${el.memberTypeName}</span>`,
              ];
            });
            // ☆☆☆☆☆ bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）
            // 必须重新赋值整个config
            /**
             * 方式一 ：
             * this.config1.data = arr;
             * this.config1={...this.config1}
             */
            /**
             * 方式二 ： 如下重新写一遍
             */
            /**
             * 方式三： 直接在html中绑定对象就会监听到
             */
            this.config1 = {
              data: arr,
              header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
              align: ["center", "center", "center", "center", "center"],
              columnWidth: [150],
              rowNum: 7,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 1000,
              headerHeight: "45",
            };
            // console.log("config1", arr, this.config1);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          } else if (this.type == 2) {
            let arr = val.map((el) => {
              return [
                el.deptName,
                el.carName,
                el.carTypeName,
                el.carNumber,
                `<span class="${
                  el.carStatusName == "正常"
                    ? "green1"
                    : el.carStatusName == "维修"
                    ? "red1"
                    : "blue1"
                }">${el.carStatusName}</span>`,
              ];
            });
            // this.config2.data = arr;
            this.config2 = {
              data: arr,
              header: [
                "所在单位",
                "车辆名称",
                "车辆属性",
                "车牌号",
                "车辆状态",
              ],
              align: ["center", "center", "center", "center", "center"],
              columnWidth: [150],
              rowNum: 7,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 1000,
              headerHeight: "45",
            };
            // console.log("config2", arr, this.config2);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          } else if (this.type == 3) {
            let arr = val.map((el) => {
              return [
                el.dutyTypeName,
                el.userName,
                el.workPhoneNumber,
                el.mobilePhoneNumber,
                el.virtualNumber,
              ];
            });
            // this.config2.data = arr;
            this.config3 = {
              data: arr,
              header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],
              align: ["center", "center", "center", "center", "center"],
              columnWidth: [100, , , ,],
              rowNum: 4,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 1000,
              headerHeight: "35",
            };
            // console.log("config3", arr, this.config3);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          } else if (this.type == 4) {
            let arr = val.map((el) => {
              return [el.dutyDeptName, el.userName, el.mobilePhoneNumber];
            });
            // this.config2.data = arr;
            this.config4 = {
              data: arr,
              header: ["值班类型", "值班人员", "联系电话"],
              align: ["center", "center", "center"],
              columnWidth: [150, 150, ,],
              rowNum: 7,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 3000,
              headerHeight: "45",
            };
            // console.log("config3", arr, this.config3);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          }
        }
      },
      // 这里是关键，代表递归监听的变化
      deep: true,
      // immediate: true,
    },
  },
  data() {
    return {
      config1: {
        header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
        data: [],
        align: ["center", "center", "center", "center", "center"],
        columnWidth: [150],
        rowNum: 7,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "45",
      },
      config2: {
        header: ["所在单位", "车辆名称", "车辆属性", "车牌号", "车辆状态"],
        data: [],
        align: ["center", "center", "center", "center", "center"],
        columnWidth: [150],
        rowNum: 7,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "45",
      },
      config3: {
        header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],
        data: [],
        align: ["center", "center", "center", "center", "center"],
        // columnWidth: [150],
        rowNum: 4,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "35",
      },
      config4: {
        header: ["值班类型", "值班人员", "联系电话"],
        data: [],
        align: ["center", "center", "center"],
        // columnWidth: [150],
        rowNum: 7,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "35",
      },
    };
  },

  mounted() {},
  // 销毁定时器
  beforeDestroy() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
@import "../components/css/rem.scss";

::v-deep.dv-scroll-board .header .header-item {
  // color: #f39800;
  // color: cyan;
  color: #6fddc2;
  font-weight: 700;
}

::v-deep.dv-scroll-board.solo .rows {
  border: 1px solid rgba(0, 238, 255, 0.123);
}

::v-deep.dv-scroll-board .green1,
::v-deep.dv-scroll-board .red1,
::v-deep.dv-scroll-board .yellow1,
::v-deep.dv-scroll-board .blue1 {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

::v-deep.dv-scroll-board .green1 {
  border: 1px solid cyan;
  background: rgba(0, 255, 255, 0.2);
}

::v-deep.dv-scroll-board .red1 {
  border: 1px solid rgb(250, 13, 84);
  background: rgba(250, 13, 84, 0.2);
}

::v-deep.dv-scroll-board .blue1 {
  border: 1px solid rgb(0, 89, 255);
  background: rgba(0, 89, 255, 0.2);
}

::v-deep.dv-scroll-board .yellow1 {
  border: 1px solid rgb(250, 213, 2);
  background: rgba(250, 213, 2, 0.2);
}
</style>

方法三：直接在html中绑定对象,数据变化会自动更新页面

 <dv-water-level-pond style="width: 0.65rem; height: 0.65rem"
   :config="{
      data: [res.currentLevel],
      waveNum: 1,
      waveHeight: 10,
      waveOpacity: 0.5,
      shape: 'round',
      colors: ['#fff', '#ff3300']
  }" 
/>