/**
* 项目中的基础表格,这里包括了二层表头,和合并单元格的表格
* 合并单元格并不是真的合并,而是通过theme定制的方式来做的
*/
<template>
<c-grid ref="cgrid"
v-if="$_headers.length && refleshFlag"
:data="$_tableData"
class="material border"
:frozen-col-count="fixCols.length"
:theme="userTheme">
<template v-for="(header,index) in $_headers">
<c-grid-column v-if="!header.children"
:key="header.label"
:caption="` ${header.label} `"
:field="(CGGRID_FORMATTER[header.type]|| (a => a))(header.name)"
:width="header.width"
header-type="sort"
header-action="sort"
@changed-header-value="onChangeHeaderValue"
:header-style="{textAlign: ALIGN[header.type] ||'left',bgColor: '#f5f5f5',font: 'bold 12px Roboto',color: '#000000'}"
:column-style="columnStyle(header.type)"
:min-width="header.minWidth || 100">
</c-grid-column>
<c-grid-column-group v-else
:key="header.label"
:caption="header.label"
:header-style="{textAlign: 'center',bgColor: '#f5f5f5',font: 'bold 12px Roboto',color: '#000000'}">
<c-grid-column v-for="subheader in header.children"
:key="subheader.label"
:caption="` ${subheader.label} `"
:field="(CGGRID_FORMATTER[header.type]|| (a => a))(header.name,subheader.name,FORMATTER_STR[subheader.type])"
:width="subheader.width"
header-type="sort"
header-action="sort"
@changed-header-value="onChangeHeaderValue"
:header-style="{textAlign: ALIGN[subheader.type] ||'left',bgColor: '#f5f5f5',font: 'bold 12px Roboto',color: '#000000'}"
:column-style="columnStyle(header.type)"
:min-width="subheader.minWidth || 100"></c-grid-column>
</c-grid-column-group>
</template>
</c-grid>
</template>
<script>
import { CGGRID_FORMATTER, ALIGN, FORMATTER_STR } from '@/utils/tableFormatter';
import * as cGridAll from 'vue-cheetah-grid';
import { sum, flatten, orderBy, cloneDeep } from 'lodash';
export default {
name: 'CGrid',
components: { ...cGridAll },
props: {
// 表格数据
tableData: {
type: Array,
default() {
return [];
},
},
// 表头
headers: {
type: Array,
default() {
return [];
},
},
// 固定列,这里只取数组长度,为了与 el-table 保持兼容
fixCols: {
type: Array,
default() {
return [];
},
},
// 各行高亮, 暂时没有实现,为了与 el-table 保持兼容
stripe: {
type: Boolean,
default: true,
},
// 高亮行 [[列name,目标值]] 当 rec.列name === 目标值 的时候,行高亮,与customColumnStyle互斥
hightLightRows: {
type: Array,
default() {
return [];
},
},
// 高亮 tr , 接受参数 rec为当前行的数据,放回style对象,放回对象参考:
// https://future-architect.github.io/cheetah-grid/0.11/demos/usage/column_styles.html
customColumnStyle: {
type: Function,
default: null,
},
},
data() {
this.CGGRID_FORMATTER = CGGRID_FORMATTER;
this.ALIGN = ALIGN;
this.FORMATTER_STR = FORMATTER_STR;
return {
refleshFlag: true, // 强制刷新标志,false => true 用来强制表格重新渲染
// 组件内部排序,当没有合并单元格的时候,可以在组件内部排序
sort: {
sortBy: '',
order: '',
},
userTheme: {
font: '12px Roboto',
borderColor: args => {
// 合并单元格的Theme设置
const {
col,
row,
grid: { frozenRowCount },
} = args;
const currentHeader = this.$_flattenHeaders[col];
if (currentHeader && currentHeader.type === 'spanRows' && row >= frozenRowCount) {
const __row = row - frozenRowCount;
const currentCellData = this.$_tableData[__row][currentHeader.name];
if (__row === currentCellData.rowSpanStart && currentCellData.rowSpan === 1) {
return ['#ebeef5'];
}
if (__row === currentCellData.rowSpanStart) {
return ['#ebeef5', '#ebeef5', null, '#ebeef5'];
}
if (__row === currentCellData.rowSpanStart + currentCellData.rowSpan - 1) {
return [null, '#ebeef5', '#ebeef5', '#ebeef5'];
}
return [null, '#ebeef5'];
}
return ['#ebeef5'];
},
},
};
},
computed: {
// 展开的表头
$_flattenHeaders() {
return flatten(
this.headers.map(item => {
if (item.children) {
return item.children.map(jtem => {
jtem.$_parent = item;
return jtem;
});
}
return [item];
}),
);
},
// 表头取值函数,用来做排序
$_headerIteratees() {
return this.$_flattenHeaders.map(header => {
if (header.type === 'spanRows' || header.type === 'objectValue') {
return item => {
const value = item[header.name].value;
return +value || value;
};
}
if (header.$_parent) {
return item => {
const value = item[header.$_parent.name][header.name];
return +value || value;
};
}
return item => {
const value = item[header.name];
return +value || value;
};
});
},
// 总宽度,用于计算表头宽度
$_totalWidth() {
return sum(this.$_flattenHeaders.map(item => item.minWidth || 100));
},
// 计算表头,计算表头宽度,并设置符合列的单元格类型
$_headers() {
// 计算列的百分比宽度
let widthLeft = 100; // 这里这样计算是为了修复小数点偏差,让最后一个单元格将剩下的宽度占满
this.$_flattenHeaders.map((item, index) => {
let __width = (Math.floor(((item.minWidth || 100) / this.$_totalWidth) * 1000) / 10).toFixed(1);
__width = __width < 1 ? 1 : __width;
if (index !== this.$_flattenHeaders.length - 1) {
widthLeft -= __width;
item.width = `${__width}%`;
} else {
widthLeft = (Math.floor(widthLeft * 3) / 3).toFixed(1);
widthLeft = widthLeft < 1 ? 1 : widthLeft;
item.width = `${widthLeft}%`;
}
return item;
});
// 设置复合列(二层表头)的单元格类型
return this.headers.map(item => {
if (item.children) {
item.type = 'subObjectProp';
}
return item;
});
},
// 计算表格数据,添加列索引,用来计算合并单元格.如果可以组件内排序,则添加排序逻辑
$_tableData() {
let __tableData = cloneDeep(this.tableData);
if (this.canSortInside && this.sort.order) {
__tableData = orderBy(__tableData, [this.sort.sortBy], [this.sort.order]);
}
return __tableData.map((item, index) => {
item.$_index = index;
return item;
});
},
/**
* 是否可以在组件内排序(没有合并单元格就可以在内部排序)
*/
canSortInside() {
return !this.$_flattenHeaders.find(header => header.type === 'spanRows');
},
},
methods: {
updateSize() {
// 强制重新渲染表格
this.refleshFlag = false;
this.$nextTick().then(() => {
this.refleshFlag = true;
});
},
// 高亮行
columnStyle(headerType) {
if (this.hightLightRows.length) {
return rec => ({
textAlign: this.ALIGN[headerType] || 'left',
padding: [0, 5],
bgColor: this.hightLightRows.some(pair => rec[pair[0]] === pair[1]) ? '#f5f5f5' : '',
});
}
if (this.customColumnStyle) {
return rec => ({
textAlign: this.ALIGN[headerType] || 'left',
padding: [0, 5],
...this.customColumnStyle(rec),
});
}
return rec => ({
textAlign: this.ALIGN[headerType] || 'left',
padding: [0, 5],
});
},
cancelSort() {
if (this.canSortInside) {
this.sort = {};
} else {
this.$emit('update:outersort', { sortBy: '', iteratee: '', order: '' });
}
// future-architect/cheetah-grid #145 issue
this.$refs.cgrid.rawGrid.sortState = null;
},
// 表头排序
onChangeHeaderValue({ col, field, oldValue, row, value }) {
// console.log(col, field, oldValue, row, value);
// 内部排序,直接改变 sort 属性,这样会重新计算 $_tableData
if (oldValue === 'desc' && value === 'asc') {
this.cancelSort();
return;
}
if (this.canSortInside) {
this.sort.sortBy = this.$_headerIteratees[col];
this.sort.order = value;
} else {
// 无法内部排序,则发送事件,异步更新外部排序条件,让调用者将排序好的tableData重新下发
this.$emit('update:outersort', {
sortBy: this.$_flattenHeaders[col],
iteratee: this.$_headerIteratees[col],
order: value,
});
}
},
},
watch: {
// 当表头变化的时候,强制重新渲染表格
$_headers() {
this.updateSize();
},
},
};
</script>
<style lang="scss" scoped>
</style>
Last active
April 4, 2019 00:59
-
-
Save lesonky/f7c24ff83f5f1990acf8b713da3dd259 to your computer and use it in GitHub Desktop.
VueCheetahGrid 使用
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default data = [ | |
{ | |
"date": "2019-04-03", | |
"rows": [ | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 107.799348, "conversions": 1322, "cpi": 0.08154262329803327 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 58.865492, "conversions": 57, "cpi": 1.0327279298245615 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 1.977909, "conversions": 1, "cpi": 1.977909 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": 30.25, "conversions": 30, "cpi": 1.0083333333333333 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 21.932796, "conversions": 18, "cpi": 1.2184886666666666 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 5.61, "conversions": 8, "cpi": 0.70125 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
}, | |
{ | |
"us": { "cost": 2.607213, "conversions": 1, "cpi": 2.607213 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
} | |
] | |
}, | |
{ | |
"date": "2019-04-02", | |
"rows": [ | |
{ | |
"us": { "cost": 3056.050713, "conversions": 3989, "cpi": 0.7661195068939584 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 179.182945, "conversions": 184, "cpi": 0.9738203532608695 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 2106.524673, "conversions": 32699, "cpi": 0.06442168485274778 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 1407.356068, "conversions": 1501, "cpi": 0.9376123037974684 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 621.76528, "conversions": 593, "cpi": 1.048508060708263 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 287.807596, "conversions": 307, "cpi": 0.9374840260586319 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
}, | |
{ | |
"us": { "cost": 104.306748, "conversions": 72, "cpi": 1.4487048333333332 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
} | |
] | |
}, | |
{ | |
"date": "2019-04-01", | |
"rows": [ | |
{ | |
"us": { "cost": 2911.489043, "conversions": 4174, "cpi": 0.6975297180162914 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 171.361654, "conversions": 219, "cpi": 0.782473305936073 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 2130.490437, "conversions": 29828, "cpi": 0.07142585614188011 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 1172.2017879999999, "conversions": 1320, "cpi": 0.8880316575757574 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 653.005546, "conversions": 664, "cpi": 0.9834420873493975 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 369.001904, "conversions": 324, "cpi": 1.1388947654320989 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A350" | |
}, | |
{ | |
"us": { "cost": 138.000327, "conversions": 140, "cpi": 0.9857166214285714 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
}, | |
{ | |
"us": { "cost": 105.194057, "conversions": 94, "cpi": 1.1190857127659575 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
}, | |
{ | |
"us": { "cost": 24.442223, "conversions": 12, "cpi": 2.0368519166666665 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A410" | |
} | |
] | |
}, | |
{ | |
"date": "2019-03-31", | |
"rows": [ | |
{ | |
"us": { "cost": 3119.8193619999997, "conversions": 3859, "cpi": 0.8084528017621144 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 118.328392, "conversions": 139, "cpi": 0.8512833956834532 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 1970.507119, "conversions": 28704, "cpi": 0.0686492167990524 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 1185.4729379999999, "conversions": 1373, "cpi": 0.8634180174799708 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 792.226206, "conversions": 804, "cpi": 0.9853559776119404 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 499.2577, "conversions": 463, "cpi": 1.0783103671706264 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A410" | |
}, | |
{ | |
"us": { "cost": 250.168542, "conversions": 238, "cpi": 1.0511283277310925 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A350" | |
}, | |
{ | |
"us": { "cost": 159.999584, "conversions": 134, "cpi": 1.1940267462686567 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
}, | |
{ | |
"us": { "cost": 155.22762699999998, "conversions": 98, "cpi": 1.5839553775510202 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
} | |
] | |
}, | |
{ | |
"date": "2019-03-30", | |
"rows": [ | |
{ | |
"us": { "cost": 2750.022224, "conversions": 3983, "cpi": 0.6904399256841576 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 126.6571, "conversions": 146, "cpi": 0.8675143835616438 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 1971.351221, "conversions": 27723, "cpi": 0.07110887064891967 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 1213.776519, "conversions": 1318, "cpi": 0.9209230037936267 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 865.5475729999999, "conversions": 779, "cpi": 1.1111008639281128 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 601.90739, "conversions": 635, "cpi": 0.947885653543307 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A410" | |
}, | |
{ | |
"us": { "cost": 286.22256500000003, "conversions": 255, "cpi": 1.122441431372549 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
}, | |
{ | |
"us": { "cost": 152.4094, "conversions": 125, "cpi": 1.2192752 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
}, | |
{ | |
"us": { "cost": 66.660841, "conversions": 61, "cpi": 1.0928006721311476 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A350" | |
} | |
] | |
}, | |
{ | |
"date": "2019-03-29", | |
"rows": [ | |
{ | |
"us": { "cost": 2047.171226, "conversions": 2622, "cpi": 0.7807670579710144 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 74.879735, "conversions": 123, "cpi": 0.6087783333333333 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 2062.246204, "conversions": 28585, "cpi": 0.07214434857442714 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 1314.290058, "conversions": 1467, "cpi": 0.8959032433537832 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 917.03674, "conversions": 870, "cpi": 1.0540652183908046 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 559.395497, "conversions": 515, "cpi": 1.0862048485436893 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A410" | |
}, | |
{ | |
"us": { "cost": 253.54070000000002, "conversions": 139, "cpi": 1.8240338129496403 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
}, | |
{ | |
"us": { "cost": 214.766078, "conversions": 180, "cpi": 1.1931448777777778 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
}, | |
{ | |
"us": { "cost": 51.112785, "conversions": 51, "cpi": 1.0022114705882352 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A350" | |
} | |
] | |
}, | |
{ | |
"date": "2019-03-28", | |
"rows": [ | |
{ | |
"us": { "cost": 3089.0317680000003, "conversions": 4044, "cpi": 0.7638555311572701 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 182.195688, "conversions": 192, "cpi": 0.948935875 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 3263.879334, "conversions": 42973, "cpi": 0.07595186126172249 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 1963.867745, "conversions": 2103, "cpi": 0.9338410580123633 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 875.792645, "conversions": 887, "cpi": 0.9873648759864713 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 641.692476, "conversions": 608, "cpi": 1.0554152565789474 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A410" | |
}, | |
{ | |
"us": { "cost": 159.185036, "conversions": 154, "cpi": 1.0336690649350648 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
}, | |
{ | |
"us": { "cost": 62.863949, "conversions": 42, "cpi": 1.4967606904761905 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
}, | |
{ | |
"us": { "cost": 52.137478, "conversions": 26, "cpi": 2.0052876153846153 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A350" | |
} | |
] | |
}, | |
{ | |
"date": "2019-03-27", | |
"rows": [ | |
{ | |
"us": { "cost": null, "conversions": null }, | |
"": { "cost": 2796.251914, "conversions": 35642, "cpi": 0.07845384417260536 }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A280" | |
}, | |
{ | |
"us": { "cost": 2081.529258, "conversions": 2749, "cpi": 0.7571950738450346 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": 192.078027, "conversions": 239, "cpi": 0.8036737531380753 }, | |
"code": "A376" | |
}, | |
{ | |
"us": { "cost": 1132.3558349999998, "conversions": 1368, "cpi": 0.8277454934210525 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A351" | |
}, | |
{ | |
"us": { "cost": 707.86356, "conversions": 870, "cpi": 0.813636275862069 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A413" | |
}, | |
{ | |
"us": { "cost": 511.586448, "conversions": 549, "cpi": 0.9318514535519126 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A410" | |
}, | |
{ | |
"us": { "cost": 95.505025, "conversions": 91, "cpi": 1.0495057692307692 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A395" | |
}, | |
{ | |
"us": { "cost": 53.636385, "conversions": 43, "cpi": 1.2473577906976743 }, | |
"": { "cost": null, "conversions": null }, | |
"ca": { "cost": null, "conversions": null }, | |
"code": "A435" | |
} | |
] | |
} | |
] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default header = [ | |
{ "label": "Date", "name": "date", "type": "date" }, | |
{ "label": "Code", "name": "code", "type": "string" }, | |
{ | |
"label": "US", | |
"name": "us", | |
"is_country": true, | |
"children": [ | |
{ "label": "Cost", "name": "cost", "type": "number" }, | |
{ "label": "Conversion", "name": "conversions", "type": "int" }, | |
{ "label": "CPI", "name": "cpi", "type": "number" } | |
] | |
}, | |
{ | |
"label": "", | |
"name": "", | |
"is_country": true, | |
"children": [ | |
{ "label": "Cost", "name": "cost", "type": "number" }, | |
{ "label": "Conversion", "name": "conversions", "type": "int" }, | |
{ "label": "CPI", "name": "cpi", "type": "number" } | |
] | |
}, | |
{ | |
"label": "CA", | |
"name": "ca", | |
"is_country": true, | |
"children": [ | |
{ "label": "Cost", "name": "cost", "type": "number" }, | |
{ "label": "Conversion", "name": "conversions", "type": "int" }, | |
{ "label": "CPI", "name": "cpi", "type": "number" } | |
] | |
} | |
] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* cgrid 的 field 字段生成函数 | |
*/ | |
export const CGGRID_FORMATTER = { | |
int: (name) => (rec) => (rec[name] ? vm.$numeral(rec[name]).format('0,0') : '-'), | |
number: (name) => (rec) => (rec[name] ? vm.$numeral(rec[name]).format('0,0.00') : '-'), | |
percent: (name) => (rec) => (rec[name] ? `${vm.$numeral(rec[name]).format('0,0.00')}%` : '-'), | |
float2percent: (name) => (rec) => (rec[name] ? vm.$numeral(rec[name]).format('0.00%') : '-'), | |
objectValue: (name) => (rec) => (rec[name] ? rec[name].value : '-'), | |
reverseTruncate: (name) => (rec) => { | |
if (!rec[name]) { | |
return '-'; | |
} | |
return reverseTruncate(rec[name], 35); | |
}, | |
spanRows: (name) => (rec) => { | |
const __value = rec[name]; | |
const index = rec.$_index; | |
if (index === __value.rowSpanStart) { | |
return __value.value; | |
} | |
return ''; | |
}, | |
subObjectProp: (pname, cname, formatterStr) => (rec) => { | |
const target = rec[pname][cname]; | |
if (target) { | |
return vm.$numeral(target).format(formatterStr); | |
} | |
return '-'; | |
}, | |
}; | |
export const FORMATTER_STR = { | |
int: '0,0', | |
number: '0,0.00', | |
percent: '0,0.00', | |
float2percent: '0.00%', | |
}; | |
export const ALIGN = { | |
int: 'right', | |
number: 'right', | |
percent: 'right', | |
float2percent: 'right', | |
objectValue: 'center', | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment