mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2025-12-08 17:12:28 +08:00
129 lines
4.1 KiB
Java
129 lines
4.1 KiB
Java
<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> |