项目初始化

datax-ui/src/views/visual/datachart/DataChartBuild.vue

@@ -89,7 +89,7 @@
           <el-tabs type="card">
             <el-tab-pane label="图表预览">
               <div class="widget-center-pane-chart">
-                <chart-panel id="chartPanel" ref="chartPanel" :chart-schema="widget" :chart-data="[]" />
+                <chart-panel v-if="visible" id="chartPanel" ref="chartPanel" :chart-schema="widget" :chart-data="[]" />
               </div>
             </el-tab-pane>
             <el-tab-pane label="查询脚本">
@@ -172,6 +172,7 @@ export default {
         data: [],
         sql: ''
       },
+      visible: false,
       isCollapse: false
     }
   },
@@ -245,6 +246,7 @@ export default {
           const { data } = response
           this.chartData.data = data.data
           this.chartData.sql = data.sql
+          this.visible = true
         }
       })
     },
@@ -257,6 +259,7 @@ export default {
       this.widget.measures = []
       this.chartData.data = []
       this.chartData.sql = ''
+      this.visible = false
     },
     handleSubmit() {
       const data = {

datax-ui/src/views/visual/datachart/components/widgets/ChartTable.vue

 <template>
-  <div ref="chart" :style="chartStyle">ChartTable</div>
+  <div ref="chart" :style="chartStyle">
+    <my-chart-table :col="tableCol" :data="tableData" />
+  </div>
 </template>
 
 <script>
+import MyChartTable from './charttable/MyChartTable'
+
 export default {
   name: 'ChartTable',
+  components: {
+    MyChartTable
+  },
   props: {
     data: {
       type: Array,
@@ -29,6 +36,62 @@ export default {
         }
       }
     }
+  },
+  computed: {
+    tableCol() {
+      return [
+        {
+          prop: 'date',
+          label: '日期'
+        },
+        {
+          label: '配送信息',
+          children: [
+            {
+              prop: 'name',
+              label: '姓名'
+            },
+            {
+              label: '地址',
+              children: [
+                {
+                  prop: 'province',
+                  label: '省份'
+                },
+                {
+                  prop: 'city',
+                  label: '市区'
+                },
+                {
+                  prop: 'address',
+                  label: '地址'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    tableData() {
+      return [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }
+      ]
+    }
   }
 }
 </script>

datax-ui/src/views/visual/datachart/components/widgets/charttable/MyChartColumn.vue

+<template>
+  <el-table-column :prop="col.prop" :label="col.label" align="center" show-overflow-tooltip>
+    <template v-if="col.children">
+      <my-chart-column v-for="(item, index) in col.children" :key="index" :col="item" />
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+export default {
+  name: 'MyChartColumn',
+  props: {
+    col: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {}
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/visual/datachart/components/widgets/charttable/MyChartTable.vue

+<template>
+  <div>
+    <el-table :data="data">
+      <my-chart-column v-for="(item, index) in col" :key="index" :col="item" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import MyChartColumn from './MyChartColumn'
+
+export default {
+  name: 'MyChartTable',
+  components: {
+    MyChartColumn
+  },
+  props: {
+    col: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    },
+    data: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>