优化大屏组件DataV的轮播表-Toy模板网

这篇具有很好参考价值的文章主要介绍了优化大屏组件DataV的轮播表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、前提：
当我们开发大屏的时候，为了快速开发，我们选用了一些组件。例如DataV。例如选用了轮播表组件
dv-scroll-board,VUE,1024程序员节
2、优化：
但是它的数据格式却是这样的（如下图），非常不符合我们平时的开发格式，因此我在此优化了一下

首先优化了：
1、header的格式
原本的：

header: ['列1', '列2', '列3'],

优化的：

header:[
       {
        prop:'modifierTime',
        label:'时间'
       },
       {
        prop:'order',
        label:'订单号'
       },
       {
        prop:'orderRunState',
        label:'订单状态',
        align:'right'
       }
      ],

2、对齐方式
原本只能设置全部列的对齐方向

优化的：

header:[
	{
       prop:'modifierTime',
       label:'时间',
       align:'left' //在header每一列设置对齐方式，不设置跟随默认
     }
]

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']
  ],

优化后：

data:[
	{
		key:'value' //你的列的字段和值
	}
]

4、自动计算列的长度
原本：原本的只能设置数字，不能设置’auto’，非常不适合我们的开发。因此我优化了一下
优化后：

config: {
        header: header,//header是前面设置的
        data: data, //data是你的数据
        rowNum: 4, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: false,
        waitTime:20000,
        columnWidth: [95,'auto','auto',90], //设置'auto'，标识改列自动计算长度
        align: ['left'],//全局默认的对齐方式
      }

OK,优化项大概这些。下面介绍如何使用：
5、引用
5.1、引入npm

 npm install  git+ssh://https://gitee.com/zheng-haiwen/jiaminghai-dataview.git

5.2、使用
HTML:

<dv-scroll-board class="dv-scr-board" :config="config" />

JS:

config: {
        header:[
			{
		       prop:'modifierTime',
		       label:'时间',
		       align:'right' //在header每一列设置对齐方式，不设置跟随默认
	     	},
	     	{
		       prop:'modifierTime2',
		       label:'时间',
		       align:'center' //在header每一列设置对齐方式，不设置跟随默认
	     	},
	     	{
		       prop:'modifierTime3',
		       label:'时间',
		       align:'left' //在header每一列设置对齐方式，不设置跟随默认
	     	},
	     	{
		       prop:'modifierTime4',
		       label:'时间',
		       align:'left' //在header每一列设置对齐方式，不设置跟随默认
	     	}
		] ,
        data: [
			{
				modifierTime：'2022-10-24',
				modifierTime2：'2022-10-24',
				modifierTime3：'2022-10-24',
				modifierTime4：'2022-10-24',
			}
		],
        rowNum: 4, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: false,
        waitTime:20000,
        columnWidth: [95,'auto','auto',90],
        align: ['left']
      }