JeecgBoot 三级联动+后台获取数据
2020年03月02日
三级联动实例界面
找到前端VUE代码页
<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'
import {getAction} from "../../../../api/manage";
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() {
// 初始化数据
// 取到 parent 为null 的所有数据,调用下面的request(parentId)方法
this.columns[0].options = this.request(null)
},
methods: {
request(parentId) {
return this.mockData.filter(i => i.parent === parentId)
},
/** 测试从后台获取数据 */
getData(getvalue){
return getAction("/person/person/getData",getvalue)
},
/** 当选项被改变时,联动其他组件 */
handleValueChange(event) {
const { type, row, column, value, target } = event
if (type === FormTypes.select) {
// 第一列
if (column.key === 's1') {
// 设置第二列的 options 调用request(parentId)方法,设置下一列的值
this.columns[1].options = this.request(value)
this.columns[1].options = [
{ "label": "唐山市", "value": "130200", "parent": "130000" }
]
// 清空后两列的数据
target.setValues([{
rowKey: row.id,
values: { s2: '', s3: '' }
}])
this.columns[2].options = []
} else
// 第二列
if (column.key === 's2') {
// this.columns[2].options = this.request(value)
getAction("/person/person/getData").then(res=>{
//使用Json串对象也是可以的 2020-03-02 Lilac
// res = "[{ \"label\": \"唐山市\", \"value\": \"130200\", \"parent\": \"130000\" }," +
// "{ \"label\": \"重庆市\", \"value\": \"130200\", \"parent\": \"130000\" }," +
// "{ \"label\": \"天津市\", \"value\": \"130200\", \"parent\": \"130000\" }]";
//接口返回的结果是JSON对象
alert(res);
// 直接使用JSON对象
this.columns[2].options = res;
}
)
target.setValues([{
rowKey: row.id,
values: { s3: '' }
}])
}
}
},
}
}
</script>
<style scoped>
</style>
原有实例中有数据部分
三级联动选择代码如下:
看else部分代码
getAction语句是从后台的功能获取数据
后台代码
为前端提供数据,返回的数据是JSON对象
前端接收到后,需要进行处理
代码如下:
前端通过分析原有代码,发现不使用原有的数据格式,改为JSON对象直接使用也是可以的。这样就不用转换成MockData的格式了。
参考:
4.示例(js增强中发起后台请求)
4-1.后台定义请求方法
4-2.定义js增强(此处是直接在created中发起了一个请求)
4-3.进入页面测试效果如下:
后台也接收到参数