iview弹出页面预览表格，根据返回数据自定义生成列和行

    <Modal class="noPaddingModal" :title="previewModal_title" v-model="previewModal" :scrollable="true"
           :mask-closable="false">
      <div style="height: auto;overflow-y: auto;padding: 16px;">
        <template>
          当前预览行数: <Input v-model="page.currentsize" readonly style="width: 50px"/>
        </template>
        <template>
          最大预览行数: <Input v-model="page.size" type="number" placeholder="请输入要显示的行数" clearable style="width: 150px"/>
        </template>
        <Tooltip content="刷新">
          <Button @click="refreshSqlResult(false)" type="text" icon="md-refresh-circle" size="small"
                  style="margin-top: -2px;"></Button>
        </Tooltip>
        <Table :columns="listCol" :data="listdata">
          <template slot-scope="{row,index}" :slot="item.slot" v-for="(item,index) in listCol">
            {{ row[item.slot] }}
          </template>
        </Table>
      </div>
    </Modal>

  data() {
    return {
      codeEditorHeight: 0,
      codeSplit: 0.3,
      listdata: [],
      listCol: [],
      page: {
        index: 0,
        size: 0,
        currentsize: 0
      },
      previewModal_title: '数据预览',
      previewModal: false
      }
      this.listCol = [];
      this.listdata = sqldata;
      let keylist = Object.keys(sqldata[0]);
      for (var i in keylist) {
         this.listCol.push({title: keylist[i], slot: keylist[i]});
       }//自定义返回列数据和行数据，可查看iview和vue语法