在编辑具体信息的时候会需要将数据展示到级联菜单中
html 代码
<el-form-item label="城市级联">
<el-cascader
:props="props"
:options="nodes.defaultNodes"
v-model="nodes.selected"/>
</el-form-item>
js代码
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
let obj
(node.level == 1 || node.level == 2) ? obj = {parent_id: node.value} : obj = ''
cityData(obj).then(res => {
if (res.code == 200) {
const nodes = res.data.map(el=>{
return {
id: el.id,
region_slug: el.region_slug,
leaf: node.level >= 2
}
})
resolve(nodes);
}
})
},
value:'id',//修改node中value为id
label:'region_slug',//同上
},
nodes: {
selected: [],
defaultNodes:[],
},
};
},
// 编辑操作
handleEdit(index, row) {
//加载city data ,不使用这里的注释掉的，注释掉的是前端自己拼node列表
/*if(row.province && row.city && row.region){
//province list
cityData().then(res=>{
if(res.code === 200){
// this.nodes.defaultNodes
let tmpProvinceList = res.data;
console.log(tmpProvinceList);
this.nodes.defaultNodes = tmpProvinceList;
//city list
cityData({parent_id:row.province}).then(res=>{
if(res.code === 200){
let tmpCityList = res.data;
console.log(tmpCityList)
this.nodes.defaultNodes.forEach((province,index)=>{
if(province.id === tmpCityList[0].parent_id){
province.children = tmpCityList;
}
return province;
})
//console.log(this.nodes.defaultNodes)
cityData({parent_id:row.city}).then(res=>{
let tmpRegionList = res.data;
console.log(tmpRegionList);
//将region加入到city的children
this.nodes.defaultNodes.forEach((province,index)=>{
if(province.children){
this.nodes.defaultNodes[index].children.forEach(city=>{
if(city.id === tmpRegionList[0].parent_id){
city.children = tmpRegionList;
}
return city;
})
}
})
})
}
})
}
})
}*/
//加载cityNodes
if (row.province && row.city && row.region) {
let query = {province: row.province, city: row.city, region: row.region}
cityNodes(query).then(res => {
if (res.code === 200) {
console.log(res.data)
this.nodes.selected = [row.province,row.city,row.region]
this.nodes.defaultNodes = res.data
} else {
this.$message.error(res.message);
}
})
}
this.idx = index;
this.form = row;
this.editVisible = true;
},
接口controller action
//获取级联nodes
public function cityNodes(Request $request){
$validator = Validator::make($request->all(),[
'province' => 'required',
'city' => 'required',
'region' => 'required',
]);
if($validator->fails()){
return $this->status($validator->errors()->first(),null,400);
}
try {
//校验
$isCorrect = BaseRegions::query()->whereIn('id', array($request->province, $request->city, $request->region))->get();
if ($isCorrect->isEmpty() || $isCorrect->count() !== 3) {
throw new \Exception('参数错误');
}
$provinceList = BaseRegions::query()->where(['parent_id' => 0])->get(['id','parent_id','level','region_slug']);
if ($provinceList->isEmpty()) {
throw new \Exception('查询省份列表错误');
}
$cityList = BaseRegions::query()->where(['parent_id' => $request->province])->get(['id','parent_id','level','region_slug']);
if ($cityList->isEmpty()) {
throw new \Exception('查询城市列表错误');
}
$regionList = BaseRegions::query()->where(['parent_id' => $request->city])->get(['id','parent_id','level','region_slug']);
if ($regionList->isEmpty()) {
throw new \Exception('查询区（县）列表错误');
}
//拼接nodes
$provinceList = $provinceList->toArray();
$cityList = $cityList->toArray();
$regionList = $regionList->toArray();
$isDone = false;
for ($i = 0; $i < count($provinceList) ; $i++){
if($provinceList[$i]['id'] === $cityList[0]['parent_id']){
$provinceList[$i]['children'] = $cityList;
$provinceList[$i]['leaf'] = false;
for($j = 0; $j < count($cityList); $j++){
if($cityList[$j]['id'] === $regionList[0]['parent_id']){
$provinceList[$i]['children'][$j]['leaf'] = false;
for($k = 0; $k < count($regionList); $k++){
if($regionList[$k]['id'] == $request->region){
$regionList[$k]['leaf'] = true;
}
}
$provinceList[$i]['children'][$j]['children'] = $regionList;
$isDone = true;
break;
}
}
}
if($isDone){break;}
}
} catch (\Exception $e) {
return $this->status($e->getMessage(), null, 400);
}
return $this->status('查询成功', $provinceList, 200);
}
php接口返回的数据
{
"message": "查询成功",
"code": 200,
"data": [
{
"id": 11,
"parent_id": 0,
"level": 0,
"region_slug": "北京"
},
{
"id": 12,
"parent_id": 0,
"level": 0,
"region_slug": "天津"
},
{
"id": 13,
"parent_id": 0,
"level": 0,
"region_slug": "河北"
},
{
"id": 14,
"parent_id": 0,
"level": 0,
"region_slug": "山西",
"children": [
{
"id": 1401,
"parent_id": 14,
"level": 1,
"region_slug": "太原"
},
{
"id": 1402,
"parent_id": 14,
"level": 1,
"region_slug": "大同",
"children": [
{
"id": 140202,
"parent_id": 1402,
"level": 2,
"region_slug": "城区"
},
{
"id": 140203,
"parent_id": 1402,
"level": 2,
"region_slug": "矿区"
},
{
"id": 140211,
"parent_id": 1402,
"level": 2,
"region_slug": "南郊"
},
{
"id": 140212,
"parent_id": 1402,
"level": 2,
"region_slug": "新荣"
},
{
"id": 140221,
"parent_id": 1402,
"level": 2,
"region_slug": "阳高"
},
{
"id": 140222,
"parent_id": 1402,
"level": 2,
"region_slug": "天镇"
},
{
"id": 140223,
"parent_id": 1402,
"level": 2,
"region_slug": "广灵"
},
{
"id": 140224,
"parent_id": 1402,
"level": 2,
"region_slug": "灵丘"
},
{
"id": 140225,
"parent_id": 1402,
"level": 2,
"region_slug": "浑源"
},
{
"id": 140226,
"parent_id": 1402,
"level": 2,
"region_slug": "左云"
},
{
"id": 140227,
"parent_id": 1402,
"level": 2,
"region_slug": "大同"
},
{
"id": 140271,
"parent_id": 1402,
"level": 2,
"region_slug": "山西大同经济开发区"
}
]
},
{
"id": 1403,
"parent_id": 14,
"level": 1,
"region_slug": "阳泉"
},
{
"id": 1404,
"parent_id": 14,
"level": 1,
"region_slug": "长治"
},
{
"id": 1405,
"parent_id": 14,
"level": 1,
"region_slug": "晋城"
},
{
"id": 1406,
"parent_id": 14,
"level": 1,
"region_slug": "朔州"
},
{
"id": 1407,
"parent_id": 14,
"level": 1,
"region_slug": "晋中"
},
{
"id": 1408,
"parent_id": 14,
"level": 1,
"region_slug": "运城"
},
{
"id": 1409,
"parent_id": 14,
"level": 1,
"region_slug": "忻州"
},
{
"id": 1410,
"parent_id": 14,
"level": 1,
"region_slug": "临汾"
},
{
"id": 1411,
"parent_id": 14,
"level": 1,
"region_slug": "吕梁"
}
]
},
{
"id": 15,
"parent_id": 0,
"level": 0,
"region_slug": "内蒙古"
},
{
"id": 21,
"parent_id": 0,
"level": 0,
"region_slug": "辽宁"
},
{
"id": 22,
"parent_id": 0,
"level": 0,
"region_slug": "吉林"
},
{
"id": 23,
"parent_id": 0,
"level": 0,
"region_slug": "黑龙江"
},
{
"id": 31,
"parent_id": 0,
"level": 0,
"region_slug": "上海"
},
{
"id": 32,
"parent_id": 0,
"level": 0,
"region_slug": "江苏"
},
{
"id": 33,
"parent_id": 0,
"level": 0,
"region_slug": "浙江"
},
{
"id": 34,
"parent_id": 0,
"level": 0,
"region_slug": "安徽"
},
{
"id": 35,
"parent_id": 0,
"level": 0,
"region_slug": "福建"
},
{
"id": 36,
"parent_id": 0,
"level": 0,
"region_slug": "江西"
},
{
"id": 37,
"parent_id": 0,
"level": 0,
"region_slug": "山东"
},
{
"id": 41,
"parent_id": 0,
"level": 0,
"region_slug": "河南"
},
{
"id": 42,
"parent_id": 0,
"level": 0,
"region_slug": "湖北"
},
{
"id": 43,
"parent_id": 0,
"level": 0,
"region_slug": "湖南"
},
{
"id": 44,
"parent_id": 0,
"level": 0,
"region_slug": "广东"
},
{
"id": 45,
"parent_id": 0,
"level": 0,
"region_slug": "广西"
},
{
"id": 46,
"parent_id": 0,
"level": 0,
"region_slug": "海南"
},
{
"id": 50,
"parent_id": 0,
"level": 0,
"region_slug": "重庆"
},
{
"id": 51,
"parent_id": 0,
"level": 0,
"region_slug": "四川"
},
{
"id": 52,
"parent_id": 0,
"level": 0,
"region_slug": "贵州"
},
{
"id": 53,
"parent_id": 0,
"level": 0,
"region_slug": "云南"
},
{
"id": 54,
"parent_id": 0,
"level": 0,
"region_slug": "西藏"
},
{
"id": 61,
"parent_id": 0,
"level": 0,
"region_slug": "陕西"
},
{
"id": 62,
"parent_id": 0,
"level": 0,
"region_slug": "甘肃"
},
{
"id": 63,
"parent_id": 0,
"level": 0,
"region_slug": "青海"
},
{
"id": 64,
"parent_id": 0,
"level": 0,
"region_slug": "宁夏"
},
{
"id": 65,
"parent_id": 0,
"level": 0,
"region_slug": "新疆"
},
{
"id": 90,
"parent_id": 0,
"level": 0,
"region_slug": "港澳台"
},
{
"id": 91,
"parent_id": 0,
"level": 0,
"region_slug": "海外"
}
]
}
效果
chrome-capture.gif
image.png
网友评论