Vue、Element-UI Table报表
年份动态、数据动态(无法确定key值)``模板字符串是在ES6中兴起,动态key值皆可拼接:用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。空数据使用formatter过滤掉<el-tab-pane label="系统档案数量统计" name="first"><el-tablev-loading="isLoading":data="
·
年份动态、数据动态(无法确定key值)
``模板字符串是在ES6中兴起,动态key值皆可拼接:用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
空数据使用formatter过滤掉
<el-tab-pane label="系统档案数量统计" name="first">
<el-table
v-loading="isLoading"
:data="(index,TableData)"
style="width: 100%;margin-left:8px;margin-right:18px"
border
fit
highlight-current-row
>
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column prop="code" label="区县" />
<el-table-column prop="entries" label="档案总条目数" />
<el-table-column prop="picture" label="画幅总数" />
<el-table-column prop="QZH" label="全宗总数" />
<el-table-column v-for="item in years" :key="item" :label="`第`+item+`年`" align="center">
<el-table-column :prop="`entries`+item" label="档案条目数" :formatter="entriesFun" />
<el-table-column :prop="`picture`+item" label="画幅数" :formatter="pictureFun" />
<el-table-column :prop="`QZH`+item" label="全宗数" :formatter="QZHFun" />
</el-table-column>
</el-table>
</el-tab-pane>
data(){
return{
TableData:[],
years:[]
}
}
method:{
entriesFun(row, column, cellValue, index) {
return cellValue || 0
},
pictureFun(row, column, cellValue, index) {
return cellValue || 0
},
QZHFun(row, column, cellValue, index) {
return cellValue || 0
},
}
康康后台小老板给的数据格式
更多推荐
已为社区贡献7条内容
所有评论(0)