模式开启 #
需要开启模板开发模式, 并开启basevue模板
在Body加入组件 #
<!--表格-->
<div class="smtdrag" id="id_1654907858638">
<el-table
:data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
height="100%"
size="mini"
header-cell-class-name="tablehead"
border
style="width: 100%">
<el-table-column v-for="item in tableHead" :label="item.label" :property="item.prop" sortable>
</el-table-column>
</el-table>
<!--表格结束-->
<!--分页控件-->
<el-pagination align='center'
@size-change="handlerSizeChange"
@current-change="handlerCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total,sizes,prev,pager,next,jumper"
:total="tableData.length"
></el-pagination>
<!--分页控件结束-->
</div>
在JS区域加入 #
var vapp = new Vue({el: '#vue_app', delimiters: ['{[', ']}'],
data: {
tableData:[], //表数据
tableHead:[], //表头
currentPage:1,
total:20,
pageSize:10
},
methods: {
//处理分页数量
handlerSizeChange(val){
this.currentPage = 1;
this.pageSize=val;
},
//处理页选择
handlerCurrentChange(val){
this.currentPage = val;
}
}
});
新增一个数据集(拖拽图形) #
在数据集编辑器中写入查询
select * from smartdemo2
limit /* $limit -- */ 100
图形开发中修改 #
let df0 = __dataset__;
//处理表头
let columnsDict = {'c1':'渠道','qty':'数量'};
let tableHead = [];
let tableHeadLabel;
for (let i=0;i<df0[0].length;i++){
if(columnsDict.hasOwnProperty(df0[0][i])){
df0[0][i] = columnsDict[df0[0][i]]
}
tableHeadLabel=df0[0][i];
tableHead.push({label: tableHeadLabel, prop:df0[0][i]});
}
//VUE赋值
vapp.tableHead = tableHead;
vapp.tableData=ds_createMap_all(df0);
表格样式 #
参考以下方法调整表头和表体的样式
.el-table th.el-table__cell{background:black;color:white;}
.el-table tr{background:gray; color:black;}
smartchart内置了这个查询模板, 你可以通过 本地模板恢复快速应用