Buildadmin implements multi-level associated drop-down effects

final effect

start

popupForm.vue code

<FormItem :label="t('interior.interiorApply.interior_index_id')" 
	type="remoteSelect"
	v-model="baTable.form.items!.interior_index_id" 
	prop="interior_index_id" 
    :input-attr="{
          pk: 'interior_index.id',
          field: 'uname',
          'remote-url': '/admin/interior.InteriorIndex/index',
          onChange: getServer,
      }" />
<FormItem :label="t('区服')" 
	type="select" 
	v-model="baTable.form.items!.server_id" 
	prop="server_id"
	:data="{ content: state.serverIds }"
	:input-attr="{
	    onChange: getRole
	}" />

<FormItem :label="t('角色')" 
	type="select" 
	v-model="baTable.form.items!.role_id" 
	prop="role_id"
	:data="{ content: state.roleIndexs }" />
<script setup lang="ts">
import {
      
       inject, reactive, ref, watch } from 'vue'
import {
      
       getServerInfo, getRoleInfo } from '/@/api/backend/interior/interiorApply'

const state: {
      
      
    roleIndexs: anyObj
    serverIds: anyObj
} = reactive({
      
      
    roleIndexs: {
      
      },
    serverIds: {
      
      },
})

const getServer = () => {
      
      
    if (!baTable.form.items!.interior_index_id || parseInt(baTable.form.items!.interior_index_id) <= 0) {
      
      
        return
    }
    getServerInfo(baTable.form.items!.interior_index_id).then((res) => {
      
      
        state.serverIds = res.data.serverIds;
    })
}
</script>

interiorApply.ts code

import createAxios from '/@/utils/axios'

export const url = '/admin/interior.InteriorApply/'

export function getRoleInfo(interior_index_id: string, server_id: string) {
    
    
    return createAxios({
    
    
        url: url + 'getRoleInfo',
        method: 'get',
        params: {
    
    
            interior_index_id: interior_index_id,
            server_id: server_id,
        },
    })
}

export function getServerInfo(interior_index_id: string) {
    
    
    return createAxios({
    
    
        url: url + 'getServerInfo',
        method: 'get',
        params: {
    
    
            interior_index_id: interior_index_id
        },
    })
}

InteriorApply backend code

/**
 * 获取区服列表
 */
public function getServerInfo(int $interior_index_id = 0): void
{
    
    
    $interiorIndex = InteriorIndex::where('id', $interior_index_id)->find();

    $serverIds = RoleIndex::where(['pid'=>$interiorIndex['pid'], 'gid'=>$interiorIndex['gid'], 'uname'=>$interiorIndex['uname']])->group('server_id')->column('server_name', 'server_id');

    if (!$serverIds) {
    
    
        $this->error(__("没有区服数据"));
    }
    $this->success('', [
        'serverIds' => $serverIds
    ]);
}

/**
 * 获取角色列表
 */
public function getRoleInfo(int $interior_index_id = 0, string $server_id = ''): void
{
    
    
    $interiorIndex = InteriorIndex::where('id', $interior_index_id)->find();

    $roleIndexs = RoleIndex::where(['pid'=>$interiorIndex['pid'], 'gid'=>$interiorIndex['gid'], 'uname'=>$interiorIndex['uname'], 'server_id'=>$server_id])->column('role_name', 'role_id');

    if (!$roleIndexs) {
    
    
        $this->error(__("没有角色数据"));
    }
    $this->success('', [
        'roleIndexs' => $roleIndexs
    ]);
}

Effect

Re-render the component

Here comes the key point. It is found that the associated subordinates have no data displayed in
f12. Check the request and find that the request and data are OK.

If the front-end prints, it will be found that there is also data. What is going on? A bold guess may be that the component is not re-rendered

In Vue, you can force a component to re-render by adding a key attribute to the component. Whenever the value of key changes, Vue will destroy the old component instance and create a new one.

You can try adding a key attribute to the FormItem component, and then set the key value to a serialized version of roleIndexs. In this way, whenever roleIndexs changes, the value of key will also change, triggering the re-rendering of the component.

Here is an example of how to add the key attribute:

<FormItem label="select" type="select" v-model="baTable.form.items!.role_id" :data="{ content: state.roleIndexs }" :key="JSON.stringify(state)" />

In this example, :key="JSON.stringify(state)" sets the value of key to a serialized version of state. Whenever state changes, the result of JSON.stringify(state) will also change, triggering a re-rendering of the component.

We can also put the key directly on el-form, so that all table data will be re-rendered and the instance modified.

<el-form :key="JSON.stringify(state)" ...>
	...
</el-form>

Effect

Edit rendering

There is another problem. After adding it, I clicked Edit and found that the name was not well rendered. All displayed key values ​​were

modified. Use watch to refresh the user data when monitoring changes. You can choose to remove the previous onChange method.

// 监听interior_index_id变化时时刷新用户数据
watch(
    () => baTable.form.items!.interior_index_id,
    () => {
    
    
        getServer()
    }
)
watch(
    () => baTable.form.items!.server_id,
    () => {
    
    
        getRole()
    }
)

Effect

end

Gifts of roses, hand a fragrance! If the content of this article is helpful to you, please don’t be stingy with your 点赞评论和关注feedback so that I can receive feedback as soon as possible. Your feedback 支持is the greatest motivation for me to continue creating. Of course, if you find 存在错误something in the article 更好的解决方法, please feel free to comment and send me a private message!

Okay, I am 向宇, https://xiangyu.blog.csdn.net

A developer who works quietly in a small company has recently started to learn Unity by himself out of hobbies. In his spare time, he records and shares while learning. Standing on the shoulders of giants, learning from the experiences of my predecessors will always give me a lot. Help and inspire! PHP is work, Unity is life! If you encounter any problems, you are also welcome to comment and send me a private message. Although I may not know some of the problems, I will check the information from all parties and try to give the best suggestions. I hope to help more people who want to learn programming. , encourage each other~