可视化系列——DataV修改轮播表

​​​​​​​本文已参与「新人创作礼」活动，一起开启掘金创作之路。

 ​

config相关参数

config属性

属性	说明	类型	可选值	默认值
header	表头数据	Array<String>	---	[]
data	表数据	Array<Array>	---	[]
rowNum	表行数	Number	---	5
headerBGC	表头背景色	String	---	'#00BAFF'
oddRowBGC	奇数行背景色	String	---	'#003B51'
evenRowBGC	偶数行背景色	String	---	#0A2732
waitTime	轮播时间间隔(ms)	Number	---	2000
headerHeight	表头高度	Number	---	35
columnWidth	列宽度	Array<Number>	[1]	[]
align	列对齐方式	Array<String>	[2]	[]
index	显示行号	Boolean	`true	false`	false
indexHeader	行号表头	String	-	'#'
carousel	轮播方式	String	`'single'	'page'`	'single'
hoverPause	悬浮暂停轮播	Boolean	---	true

 这里面虽然有表头，但是其中的样式需要通过强制转换才能替换样式；

表数据可以用span标签进行修改

官网给的结构

export default {
  header: ['列1', '列2', '列3'],
  data: [
    ['行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'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ],
  index: true,
  columnWidth: [50],
  align: ['center'],
  carousel: 'page'
}

这里可以把这个config函数体中的所有属性放在方法里，并把data单独拿出来表格样式以及渲染数据

<dv-scroll-board :config="rightTop" style="width:450px;height:280px;" />

rightTop:{}

config: {
        header: ["排行", "城市", "数量"],
        // indexHeader: "排行",

        data: [],
        rowNum: 10,
        hoverPause: false,
        headerBGC: "rgba(0,0,0,0)",
        oddRowBGC: "rgba(0,0,0,0)",
        evenRowBGC: "rgba(0,0,0,0)",
        // index: true,
        align: ["left"],
        waitTime: 100000,
      },

       数组.forEach((v,index) => {
          let className=''
          index < 3 ? className = 'indexY' : className = 'indexG'
          console.log(index);
          lists.push([`<span class="index ${className}">${index + 1}</span>`, `<span style="color:rgba(255, 255, 255, 0.7);font-size: 13px">${v.cityName}</span>`,
            `<span style="color:#ffffff; font-size: 16px">${this.$parent.formatter(v.iotCount)}</span>`]);
        });

通过给模板字符串中的${className}属性来给他一个class样式

  /deep/.indexY{
    background-color: #f5a623 !important;
  }
  /deep/.indexG{
    background-color: #389bff !important;
  }

因为他里面有自带的样式，所以需要通过优先级去更改样式

​

 整段函数内容如下：

    cityName() {
      /* 修改升降序排列 */
      if (deviceSortData.code !== 0) return;
      if (
        !deviceSortData.data.cityDoorControlVOList ||
        !deviceSortData.data.cityDoorControlVOList.length ||
        deviceSortData.data.cityDoorControlVOList.length < 1
      )
        return;
      let sortArr = deviceSortData.data.cityDoorControlVOList;
      sortArr.sort(function (a, b) {
        return b.iotCount - a.iotCount;
      });
      // 修改dataV中的api表格
      this.list = [];
      let arr = [];
      let lists = [];
      console.log(this.$refs.dvscroll);
      deviceSortData.data.cityDoorControlVOList &&
        deviceSortData.data.cityDoorControlVOList.length &&
        deviceSortData.data.cityDoorControlVOList.length > 0 &&
        deviceSortData.data.cityDoorControlVOList.forEach((v, index) => {
          let className = "";
          index < 3 ? (className = "indexY") : (className = "indexG");
          console.log(index);
          lists.push([
            `<span class="index ${className}">${index + 1}</span>`,
            `<span style="color:rgba(255, 255, 255, 0.7);font-size: 13px">${v.cityName}</span>`,
            `<span style="color:#ffffff; font-size: 16px">${this.$parent.formatter(
              v.iotCount
            )}</span>`,
          ]);
          console.log(className);
          // console.log(this.config.data instanceof Array);
          lists.forEach((res) => {
            arr = Object.values(res);
          });

          this.list.push(arr);
          this.config.data = this.list;
          // console.log(this.config.data);
          //  console.log(arr);
          let reg = /(?=(?!\b)(\d{3})+$)/g;
          let num = arr[1].toString().replace(reg, ",");
          arr.splice(1, 1, num);
        });
    },

\

​