2023西安数博会CIM演示-【前端】-Web
AdaKing88
2023-08-21 bc03b832caa49bbcd2674fe4cae3701b5059bf95
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
<template>
    <el-container style="padding: 0px">
        <el-main style="  margin: 0px;  padding: 5px;" class="gongchengbox">
            <div style="margin:5px">
                <el-select size="small" placeholder="请选择" style="width: 320px" v-model="currentServiceType.text">
                    <el-option v-for="item in serviceTypes" :key="item.id" :label="item.text" :value="item.id"
                        @change="serviceTypeSelectedChange">
                    </el-option>
                </el-select>
            </div>
            <el-table :data="tabledata" border size="mini"
                style="width: 100%;background-color: transparent;margin-top:10px" rowKey="gid">
                <el-table-column prop="xmmc" header-align="center" align="center" label="项目名称">
                </el-table-column>
                <el-table-column prop="cjdw" header-align="center" align="center" label="承建单位">
                </el-table-column>
                <el-table-column prop="mxs" header-align="center" align="center" label="工程模型数">
                </el-table-column>
                <el-table-column header-align="center" align="center" width="60" label="操作"><template
                        slot-scope="scope">
                        <el-button type="text" @click="showData(scope.row, scope.$index)" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            tabledata: [{ xmmc: "沙河入京口改造二期工程", cjdw: "北京市环境工程公司", mxs: "2293" }
                , { xmmc: "", cjdw: "", mxs: "" }
                , { xmmc: "", cjdw: "", mxs: "" }
                , { xmmc: "", cjdw: "", mxs: "" }
                , { xmmc: "", cjdw: "", mxs: "" }
            ],
            currentServiceType: { text: "" },
            serviceTypes: [
                { id: "1", text: "总体规划", },
                { id: "2", text: "专项规划", },
                { id: "3", text: "城镇开发", },
                { id: "4", text: "永久基本农田", }
            ],    //列表的数据分页   
        }
    },
    methods: {
        showData(row, index) {
 
        },
        serviceTypeSelectedChange(val) {
 
        }
    }
}
</script>
<style lang="less" scoped>
.gongchengbox {
    /deep/ .el-input__inner {
        background-color: transparent;
        background-image: none;
        border-radius: 0px;
        border: 1px solid #5c6d96;
        color: #ffffff;
    }
 
 
 
    .el-table /deep/ tr {
        background-color: transparent;
        color: rgba(240, 250, 254, 0.65);
    }
 
    .el-table /deep/ tr th {
        background-color: rgba(99, 99, 99, 1);
        color: rgba(240, 250, 254, 0.85);
    }
 
    .el-table /deep/ tr:hover>td {
        background-color: rgba(0, 166, 226, 0.4) !important;
    }
}
</style>