效果图
完整源码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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179<template>
<div class="boxShadow">
<div>
<el-button style="width:90px; font-size: 12px">全部扫描</el-button>
<el-button style="width:90px; font-size: 12px">全部清除</el-button>
</div>
<div>
<div style="margin-top: 15px;" v-for="(item, pos) in divList">
<el-input placeholder="请输入仓库地址，如有分支则空格隔开加分支名称，默认不加检测master分支。" v-model="item.gitUrl" class="input-with-select">
<!-- 编码规则 -->
<template>
<el-select v-model="item.codeType" slot="prepend" placeholder="请选择编码规则" style="width: 150px">
<el-option
v-for="opItem in options"
:key="opItem.value"
:label="opItem.label"
:value="opItem.value">
</el-option>
</el-select>
</template>
<!-- 删除 -->
<el-button slot="append" @click="deleteNode(pos)">删除</el-button>
</el-input>
</div>
<div style="width: 100%; text-align:center; margin-top: 15px; margin-bottom: 15px">
<!-- 增加 -->
<el-button icon="el-icon-plus" @click="addNode()"></el-button>
</div>
<el-table
:data="data"
:header-cell-style="tableHeaderColor"
ref='multipleTable'
border
stripe
style="width: 100%; margin-top: 20px; font-size: 10px">
<el-table-column
align="center"
prop="projectName"
label="仓库名"
width="200">
<template slot-scope="scope">
<div class="tv-branch"> {{ scope.row.projectName }}</div>
</template>
</el-table-column>
<el-table-column
class="tv-branch"
align="center"
prop="jiraId"
label="分支名">
<template slot-scope="scope">
<div class="tv-branch"> {{ scope.row.jiraId }}</div>
</template>
</el-table-column>
<el-table-column label="文件数" min-width="130px" align="center">
<template slot-scope="scope">
<div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.appName }}</div>
</template>
</el-table-column>
<el-table-column label="不规范项" min-width="130px" align="center">
<template slot-scope="scope">
<div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.branchName }}</div>
</template>
</el-table-column>
<el-table-column label="SonarQube地址" min-width="130px" align="center">
<template slot-scope="scope">
<div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.branchName }}</div>
</template>
</el-table-column>
<el-table-column
class="tv-branch"
align="center"
prop="updatedTime"
label="扫描时间">
<template slot-scope="scope">
<div class="tv-branch"> {{ scope.row.updatedTime }}</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script type='text/javascript'>
export default {
name: 'xxx',
methods: {
// 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background-color: #f0f9eb'
// return 'background-color: #f0f9eb; color: #fff; font-weight: 500;'
}
},
//添加标本div
addNode() {
this.divList.push({"codeType": "", "gitUrl": ""});
},
//删除样本div
deleteNode(i) {
this.divList.splice(i, 1); //删除index为i,位置的数组元素
},
},
data() {
return {
data: [],
options: [{
value: '选项1',
label: 'Java'
}, {
value: '选项2',
label: 'C#'
}, {
value: '选项3',
label: 'iOS'
}, {
value: '选项4',
label: 'Js'
}, {
value: '选项5',
label: 'Python'
}],
divList: [
{"codeType": "", "gitUrl": ""}
],
}
},
}
</script>
<style lang="less" scoped>
.clean{
clear:both;
}
.tv-branch{
// display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
小结
vue实现动态加载div，主要利用vue中的v-for指令，由于与数据源双向绑定的特性，可以通过修改数据源从而动态加载或删除div。
