Buildadmin は、マルチレベルの関連ドロップダウン効果を実装します。

記事ディレクトリ

最終効果
始める
コンポーネントを再レンダリングする
レンダリングの編集
終わり

最終効果

ここに画像の説明を挿入します

始める

PopupForm.vue コード

<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 コード

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 バックエンドコード

/**
 * 获取区服列表
 */
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
    ]);
}

効果
ここに画像の説明を挿入します

コンポーネントを再レンダリングする

ここが重要なポイントです。f12 に関連付けられた従属にはデータが表示されていないことがわかります
。リクエストを確認すると、リクエストとデータに問題がないことがわかります。
ここに画像の説明を挿入します
フロントエンドが印刷すると、データもあることがわかります。何が起こっているのか？大胆な推測としては、コンポーネントは再レンダリングされない可能性があります。

Vue では、コンポーネントに key 属性を追加することで、コンポーネントを強制的に再レンダリングできます。キーの値が変更されるたびに、Vue は古いコンポーネントインスタンスを破棄し、新しいコンポーネントインスタンスを作成します。

FormItem コンポーネントにキー属性を追加してから、キー値を roleIndexs のシリアル化されたバージョンに設定してみてください。このようにして、roleIndexs が変更されるたびに key の値も変更され、コンポーネントの再レンダリングがトリガーされます。

key 属性を追加する方法の例を次に示します。

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

この例では、:key="JSON.stringify(state)" は key の値を state のシリアル化されたバージョンに設定します。状態が変化すると、JSON.stringify(state) の結果も変化し、コンポーネントの再レンダリングがトリガーされます。

キーを el-form に直接配置することもできます。これにより、すべてのテーブルデータが再レンダリングされ、インスタンスが変更されます。

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

効果
ここに画像の説明を挿入します

レンダリングの編集

別の問題があります。追加した後、[編集] をクリックすると、名前が適切にレンダリングされていないことがわかりました。表示されているすべてのキー値が変更されました
ここに画像の説明を挿入します
。変更を監視するときにウォッチを使用してユーザーデータを更新します。以前の onChange を削除することを選択できます方法。

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

効果
ここに画像の説明を挿入します

終わり

バラの贈り物、香りを贈ろう！この記事の内容が役に立った場合は、点赞评论和关注できるだけ早くフィードバックを受け取ることができるよう、ケチらずにフィードバックをお送りください。フィードバックは、支持私が創作を続ける最大のモチベーションです。もちろん、記事内で存在错误何かを見つけた場合は更好的解决方法、お気軽にコメントしてプライベートメッセージを送ってください。

はい、私向宇はhttps://xiangyu.blog.csdn.net

小さな会社で黙々と働いている開発者が、最近趣味で Unity を独学で学び始めました。空いた時間に学習を記録し、共有しています。巨人の肩の上に立つと、先人の経験から学ぶことが常に得られます。」助けて、インスピレーションを与えてください! PHP は仕事、Unity は人生です! 何か問題が発生した場合は、コメントやプライベートメッセージを送っていただければ幸いです。私には分からない問題もあるかもしれませんが、関係者全員からの情報を確認し、最善の提案を提供できるよう努めます。今後ともお役に立てれば幸いです。プログラミングを学びたい人、励まし合いましょう〜

ここに画像の説明を挿入します