
### 模式开启
需要开启模板开发模式, 并开启basevue模板
![输入图片说明](https://images.gitee.com/uploads/images/2022/0624/155210_520fad81_5500438.png "屏幕截图.png")


### 在Body加入组件
```html
   <!--表格-->
    <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

```
### 图形开发中修改

```js
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);

```
![输入图片说明](https://images.gitee.com/uploads/images/2022/0624/160003_acbfc93e_5500438.png "屏幕截图.png")


> smartchart内置了这个查询模板, 你可以通过[本地模板恢复快速应用](https://gitee.com/smartchart/smartchart/wikis/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF)
