关于vue3+dataV的问题：vue3+dataV使用dv-scroll-board实现轮播图，当轮播数据长度为奇数时，区分行颜色无意义

Question

vue3+dataV使用dv-scroll-board实现轮播图，当轮播数据长度为奇数时，最后一行颜色与第一行颜色一致，区分行颜色无意义，应该如何改进呢，求各位解答，

<dv-scroll-board ref="scrollBoard" class="scroll-board" :config="fillingTable" />

[图片]

[图片]

Answer 1

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：datav dv-scroll-board轮播表加点击事件
• 除此之外, 这篇博客: 在vue项目中引用datav dv-scroll-board中的  页面数据展示 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <template>
      <div>
         
          <div>
              <span>表格</span>
              <dv-scroll-board
                  @click="tablehandle2"
                  :config="config3"
                  style="width: 100%; height: 155px"
              />
          </div>
      </div>
  </template>
  
  <script>
  const scolldata = [
      ["<span style='cursor:pointer'>测试数据1</span>", 231],
      ["<span style='cursor:pointer'>陈叔叔家</span>", 732],
      ["<span style='cursor:pointer'>长沙市</span>", 1033],
      ["<span style='cursor:pointer'>除上述局4</span>", 2034],
      ["<span style='cursor:pointer'>出生时句5</span>", 3035],
      ["<span style='cursor:pointer'>传输数据6</span>", 4036],
  ];
  export default {
      name: "comecharts",
      components: {
          commBar,
      },
      data() {
          return {
           config3: {
                  indexHeader: "序号",
                  oddRowBGC: "#FFF", // 奇数行背景色
                  evenRowBGC: "#f5f5f5", // 偶数行背景色
                  headerBGC: "#eb5a6d", // 表头背景色
                  header: ["单位名称", "本月督办次数"],
                  rowNum: 3, // 表行数
                  headerHeight: 40,
                  columnWidth: [270],
                  waitTime: 2000, // 轮播时间间隔(ms)
                  align: ["center", "center"],
                  data: scolldata,
              },
          };
      },
      methods: {
          tablehandle2(rows) {
              console.log(rows);
              if (rows.ceil.indexOf("span") != -1) {
                  let rowsdata = [];
                  for (let i = 0; i < scolldata.length; i++) {
                      if (i == rows.rowIndex) {
                          let obj = {};
                          obj.departid = scolldata[rows.rowIndex];
                          rowsdata.push(obj);
                      }
                  }
                  console.log(rowsdata);
              }
          },
      },
  };
  </script>
  
   
  <style lang="scss"  >
  .dv-scroll-board {
      color: #333;
      .header-item {
          font-size: 1em;
          text-align: center;
          white-space: nowrap;
          color: #fff !important;
      }
      .rows {
          .row-item {
              text-align: center;
              line-height: 2rem;
              span {
                  color: #2b97f2;
              }
              .ceil {
                  color: #3c3f52;
                  font-size: 1em;
                  i {
                      font-size: 0.5em;
                  }
              }
              .ceil:nth-child(2) {
                  color: #eb5a6d !important;
                  font-size: 1.1em;
                  width: 25%;
              }
          }
      }
  }
  </style>

• 以下回答由chatgpt基于相关博客总结生成:

  首先可以尝试修改偶数行的背景色，使其与奇数行有明显的视觉区别。可以将原先的 #f5f5f5 更改为类似 #efefef 的颜色，这样就可以解决行颜色无法区分的问题。

  修改后的代码如下：

  config3: {
      indexHeader: "序号",
      oddRowBGC: "#FFF", // 奇数行背景色
      evenRowBGC: "#efefef", // 偶数行背景色
      headerBGC: "#eb5a6d", // 表头背景色
      header: ["单位名称", "本月督办次数"],
      rowNum: 3, // 表行数
      headerHeight: 40,
      columnWidth: [270],
      waitTime: 2000, // 轮播时间间隔(ms)
      align: ["center", "center"],
      data: scolldata,
  },
  

  如果需要更加精确的控制每一行的颜色，可以使用伪类选择器来指定奇数行和偶数行的颜色。具体的实现方法是在样式表中添加以下代码：

  .rows .row-item:nth-child(odd) {
      background-color: #fff;
  }
  .rows .row-item:nth-child(even) {
      background-color: #efefef;
  }
  

  这样就可以精确地控制每一行的背景色，并且也可以避免在数据长度为奇数时出现与第一行相同的颜色。

  完整的样式表代码如下：

  <style lang="scss"  >
  .dv-scroll-board {
      color: #333;
      .header-item {
          font-size: 1em;
          text-align: center;
          white-space: nowrap;
          color: #fff !important;
      }
      .rows {
          .row-item {
              text-align: center;
              line-height: 2rem;
              span {
                  color: #2b97f2;
              }
              .ceil {
                  color: #3c3f52;
                  font-size: 1em;
                  i {
                      font-size: 0.5em;
                  }
              }
              .ceil:nth-child(2) {
                  color: #eb5a6d !important;
                  font-size: 1.1em;
                  width: 25%;
              }
          }
          .row-item:nth-child(odd) {
              background-color: #fff;
          }
          .row-item:nth-child(even) {
              background-color: #efefef;
          }
      }
  }
  </style>
  

Answer 2

dataV是什么？

Answer 3

Vue 大屏数据展示组件库