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