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); }); },
