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
| <template>
<el-form :rules="model.rules" :model="model" label-position="right" label-width="120px" ref="form">
<el-form-item label="请选择备份点: ">
<el-table
:data="model.appBackupList"
style="width: 500px; margin: 0 auto;"
max-height="300">
<el-table-column
label="应用">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.applicationName }}</span>
</template>
</el-table-column>
<el-table-column
label="备份点选择">
<template slot-scope="scope">
<el-form-item :prop="'appBackupList.' + scope.$index + '.backupId'" :rules='model.rules.backupId'>
<el-select
v-model="scope.row.backupId"
placeholder="请选择备份点"
@change="backupChange($event, scope.row)">
<el-option
v-for="item in scope.row.backupList"
:key="item.backupId"
:label="item.backupName"
:value="item.backupId">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
model: {
rules: {
backupId: [
{
required: true,
message: '请选择备份点',
trigger: 'change'
}
],
},
appBackupList: [{
applicationId: 1,
applicationName: '应用A',
backupId: null,
backupList: [{
backupId: '1',
backupName: '备份点1'
}, {
backupId: '2',
backupName: '备份点2'
}, {
backupId: '3',
backupName: '备份点3'
}]
}], // 备份点列表
}
}
}
}
</script>
|
