北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
lixuliang
2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
  <el-drawer
    title="查询结果"
    :visible.sync="showQueryData"
    direction="btt"
    size="100%"
    :modal="false"
    :withHeader="false"
    :append-to-body="true"
    :destroy-on-close="true"
  >
    <div class="menutop" style="margin: 0.2rem 0.1rem">
      <div class="menuback" @click="close">
        <i class="el-icon-caret-left"></i>返回
      </div>
      <div class="menutitle">查询结果</div>
    </div>
    <!-- <div class="closeButton" @click="close"><i class="el-icon-close"></i></div> -->
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="data in tableList"
        :key="data.table"
        :label="data.name"
        :name="data.table"
      >
        <!-- 改成表单的形式 -->
        <!-- <el-table :data="data.tableData" height="250">
          <el-table-column
            v-for="key in data.attr"
            :key="key"
            :property="key"
            :label="key"
          ></el-table-column>
        </el-table> -->
        <el-form :model="data">
          <el-form-item
            v-for="(value, key, index) in data.tableData[0]"
            :key="index"
            :label="key"
            label-position="left"
            label-width="65px"
            >{{ value }}</el-form-item
          >
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
 
<style scoped>
.el-tabs {
  margin: 20px 20px;
}
 
.el-drawer{
  z-index: 999999;
}
 
/* 设置边框线和边距调整 */
.el-form {
  border: 1px solid gray;
}
.el-form-item + .el-form-item {
  border-top: 1px solid gray;
}
.el-form-item {
  margin: unset;
}
.el-form-item /deep/ .el-form-item__content {
  border-left: 1px solid gray;
  padding-left: 10px;
}
</style>
    
<script>
export default {
  name: "querydata",
  data() {
    return {
      activeName: "",
      showQueryData: false,
      tableList: [],
    };
  },
  methods: {
    close() {
      this.showQueryData = false;
    },
    updataTable(queryData) {
      this.tableList = queryData;
      this.activeName = queryData[0].table;
    },
  },
  mounted() {},
};
</script>