项目初始化

datax-ui/src/views/metadata/datasearch/ColumnPane.vue

+<template>
+  <div class="app-container">
+    ColumnPane
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColumnPane',
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/metadata/datasearch/SourcePane.vue

+<template>
+  <div class="app-container">
+    SourcePane
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SourcePane',
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/metadata/datasearch/TablePane.vue

+<template>
+  <div class="app-container">
+    TablePane
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TablePane',
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/metadata/datasearch/index.vue

@@ -6,7 +6,7 @@
           <el-row>
             <el-col :span="12" :offset="6">
               <el-input placeholder="请输入内容" v-model="keyword">
-                <el-select v-model="type" slot="prepend" placeholder="请选择" style="width: 100px;">
+                <el-select v-model="type" slot="prepend" placeholder="请选择" style="width: 100px;" @change="typeSelectChanged">
                   <el-option label="数据库" value="1"></el-option>
                   <el-option label="数据表" value="2"></el-option>
                   <el-option label="数据元" value="3"></el-option>
@@ -21,7 +21,9 @@
               6
             </el-col>
             <el-col :span="18">
-              18
+              <source-pane v-if="type === '1'" :data="dataList"></source-pane>
+              <table-pane v-if="type === '2'" :data="dataList"></table-pane>
+              <column-pane v-if="type === '3'" :data="dataList"></column-pane>
             </el-col>
           </el-row>
         </div>
@@ -43,8 +45,13 @@
 </template>
 
 <script>
+import SourcePane from './SourcePane'
+import TablePane from './TablePane'
+import ColumnPane from './ColumnPane'
+
 export default {
   name: 'DataSearch',
+  components: { SourcePane, TablePane, ColumnPane },
   data () {
     return {
       classCardbody: {
@@ -54,12 +61,22 @@ export default {
       searchExecuting: false,
       type: '',
       keyword: '',
-      btnEnable: true
+      btnEnable: true,
+      dataList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20
+      }
     }
   },
   methods: {
     search () {
       this.searchExecuting = true
+    },
+    typeSelectChanged (val) {
+      this.dataList = []
+      console.log(val)
     }
   },
   computed: {