**

安装dataV

官网链接

**
实现效果

组件.vue代码

<template>
  <div>
    <dv-scroll-board
      class="board"
      :config="config"
      style="width:500px;height:220px"
    />
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    header: Array,
  },
  mounted() {
    this.$nextTick(() => {
      this.$set(this.config, "data", this.data);
      this.$set(this.config, "header", this.header);
    });
  },
  data() {
    return {
      config: {
        header: [], //表头数据
        index: true, //显示行号
        indexHeader: "序号", //行号表头
        columnWidth: [50, 150, 110, 110], //列宽度
        headerBGC: "#1B2C30", //表头背景色
        oddRowBGC: "#1E3B40", //奇数行背景色
        evenRowBGC: "#1B2C30", //偶数行背景色
        rowNum: 5, //表行数
        align: ["center", "center", "center", "center", "center"], //列对齐方式
        waitTime: 2000,
        data: [],
      },
    };
  },
};
</script>
<style lang="less" scoped>
/deep/ .header {
  color: #08cab7;
}
/deep/ .row-item {
  color: #8a98b0;
}
/deep/ .dv-scroll-board .rows .index {
  background-color: transparent !important;
}
</style>

父组件.vue文件中

<template>
  <div id="data-view">
    <!-- 轮播列表 -->
    <div>
      <div class="title"><i class="el-icon-location-information"></i>{{title}}</div>
      <scrollBoard
        :data="scrollList"
        :header="headerList"
      />
    </div>
  </div>
</template>

<script>
import scrollBoard from "../components/scrollBoard";
export default {
  components: { scrollBoard },
  mounted() {
    this.scrollList = [
      ["行1列1", "行1列2", "行1列3"],
      ["行2列1", "行2列2", "行2列3"],
      ["行3列1", "行3列2", "行3列3"],
      ["行4列1", "行4列2", "行4列3"],
      ["行5列1", "行5列2", "行5列3"],
      ["行6列1", "行6列2", "行6列3"],
      ["行7列1", "行7列2", "行7列3"],
      ["行8列1", "行8列2", "行8列3"],
    ];
    this.headerList = ["品种", "销量", "供销商", "详情"],
      this.scrollList = this.scrollList.map((item) => {
        item.push("<i style='color:#08C8B7' class='el-icon-view'></i>");
        return item;
      });
  },
  data() {
    return {
      scrollList: [], //轮播列表内容
      headerList: [], //轮播表头数据
      title: "最新一周供货情况", //轮播列表标题
    };
  },
};
</script>
<style lang="less" scoped>
#data-view {
  background-color: #030409;
  width: 100%;
  height: 800px;
  color: #fff;
  .title {
    width: 500px;
    height: 30px;
    padding: 5px 0;
    background-color: #1b2c30;
    font-size: 18px;
    text-align: center;
    color: #08bda3;
  }
}
</style>

备注
图标用了element-ui,所以也需要安装下。图标其实就是通过遍历在用html的方式写好，push进数组。