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
| <template>
| <j-editable-table
| :columns="columns"
| :dataSource="dataSource"
| :rowNumber="true"
| :actionButton="true"
| :rowSelection="true"
| :maxHeight="400"
| @valueChange="handleValueChange"
| />
| </template>
|
| <script>
| import { FormTypes } from '@/utils/JEditableTableUtil'
| import JEditableTable from '@/components/jeecg/JEditableTable'
|
| export default {
| name: 'ThreeLinkage',
| components: { JEditableTable },
| data() {
| return {
| columns: [
| {
| title: '省/直辖市/自治区',
| key: 's1',
| type: FormTypes.select,
| width: '240px',
| options: [],
| placeholder: '请选择${title}'
| },
| {
| title: '市',
| key: 's2',
| type: FormTypes.select,
| width: '240px',
| options: [],
| placeholder: '请选择${title}'
| },
| {
| title: '县/区',
| key: 's3',
| type: FormTypes.select,
| width: '240px',
| options: [],
| placeholder: '请选择${title}'
| }
| ],
| dataSource: [],
|
| mockData: [
| { label: '北京市', value: '110000', parent: null },
| { label: '天津市', value: '120000', parent: null },
| { label: '河北省', value: '130000', parent: null },
| { label: '上海市', value: '310000', parent: null },
|
| { label: '北京市', value: '110100', parent: '110000' },
| { label: '天津市市', value: '120100', parent: '120000' },
| { label: '石家庄市', value: '130100', parent: '130000' },
| { label: '唐山市', value: '130200', parent: '130000' },
| { label: '秦皇岛市', value: '130300', parent: '130000' },
| { label: '上海市', value: '310100', parent: '310000' },
|
| { label: '东城区', value: '110101', parent: '110100' },
| { label: '西城区', value: '110102', parent: '110100' },
| { label: '朝阳区', value: '110105', parent: '110100' },
| { label: '和平区', value: '120101', parent: '120000' },
| { label: '河东区', value: '120102', parent: '120000' },
| { label: '河西区', value: '120103', parent: '120000' },
| { label: '黄浦区', value: '310101', parent: '310100' },
| { label: '徐汇区', value: '310104', parent: '310100' },
| { label: '长宁区', value: '310105', parent: '310100' },
| { label: '长安区', value: '130102', parent: '130100' },
| { label: '桥西区', value: '130104', parent: '130100' },
| { label: '新华区', value: '130105', parent: '130100' },
| { label: '路南区', value: '130202', parent: '130200' },
| { label: '路北区', value: '130203', parent: '130200' },
| { label: '古冶区', value: '130204', parent: '130200' },
| { label: '海港区', value: '130302', parent: '130300' },
| { label: '山海关区', value: '130303', parent: '130300' },
| { label: '北戴河区', value: '130304', parent: '130300' },
| ]
| }
| },
| mounted() {
| // 初始化数据
| this.columns[0].options = this.request(null)
| },
| methods: {
|
| request(parentId) {
| return this.mockData.filter(i => i.parent === parentId)
| },
|
| /** 当选项被改变时，联动其他组件 */
| handleValueChange(event) {
| const { type, row, column, value, target } = event
|
| if (type === FormTypes.select) {
|
| // 第一列
| if (column.key === 's1') {
| // 设置第二列的 options
| this.columns[1].options = this.request(value)
| // 清空后两列的数据
| target.setValues([{
| rowKey: row.id,
| values: { s2: '', s3: '' }
| }])
| this.columns[2].options = []
| } else
| // 第二列
| if (column.key === 's2') {
| this.columns[2].options = this.request(value)
| target.setValues([{
| rowKey: row.id,
| values: { s3: '' }
| }])
| }
| }
|
| }
|
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
