带分页的表格

### 模式开启 #

需要开启模板开发模式, 并开启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);

> smartchart内置了这个查询模板, 你可以通过 本地模板恢复快速应用