带分页的表格

模式开启 #

需要开启模板开发模式, 并开启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内置了这个查询模板, 你可以通过 本地模板恢复快速应用