如何通过层叠在laravel 5.6中显示下拉列表中的项目？

Question

我有3个表，即菜单，子菜单和页面。

菜单表

 Schema::create('menu', function (Blueprint $table) {
        $table->increments('parent_id')->primary();
        $table->string('name');
        $table->timestamps();
    });

子菜单表

Schema::create('submenu', function (Blueprint $table) {
        $table->increments('submenu_id')->primary();
        $table->integer('parent_id');
        $table->foreign('parent_id')
            ->references('id')
            ->on('menu')
            ->onDelete('cascade');
        $table->string('title');
        $table->timestamps();
    });

页表

 Schema::create('page', function (Blueprint $table) {
        $table->increments('page_id');
        $table->integer('menu_id');
        $table->integer('submenu_id');
        $table->text('description');
        $table->integer('status')->default('1');
        $table->softDeletes();
        $table->timestamps();
    });

addpage.blade.php

 <div class="control-group">
          <label class="control-label">Menu Name</label>
          <div class="controls">
          <?php $menu = DB::table('menu')->where('status',1)->get(); ?>
            <select name="parent_id" id="parent_id">
              <option selected disabled>Select Menu Name</option>
              @foreach($menu as $data)
              <?php if($data->deleted_at==null) { ?>
              <option value="{{ $data->parent_id }}">{{ strtoupper($data->name) }}</option>
              <?php } ?>
             @endforeach
            </select>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label">Submenu Title</label>
          <div class="controls">
          <?php //$menu = DB::table('submenu')->where('deleted_at',null)->where('status',1)->get(); ?>
            <select name="submenu_id" id="submenu_id">
              <option selected disabled>Select Submenu Title</option>
             <!-- @foreach($menu as $test)
              <?php// $submenu = DB::table('submenu')->where('deleted_at',null)->where('status',1)->where('parent_id',$test->parent_id)->get(); ?>
              <?php// print_r($submenu);die; ?>
              @endforeach *-->
              <?php $submenu = DB::table('submenu')->where('status',1)->get(); ?>
              @foreach($submenu as $data)
              <?php if($data->deleted_at==null) { ?>
              <option value="{{ $data->submenu_id }}">{{ $data->title }}</option>
              <?php } ?>
             @endforeach
            </select>
          </div>
        </div>

laravel 5.6中下拉列表的级联值如何？当我添加新页面时，我想根据下拉列表中的菜单显示子菜单...所以，我想要解决这个...

Answer 1

最好的方法是使用急切加载。与两个模型建立关系，并使用此模型查询获取值。

$menus= Menu::with('submenu')->get();

<select name="parent_id" id="parent_id">
 <option selected disabled>Select Menu Name</option>
  @foreach($menu as $key=>$value)
          <option value="{{ $key }}">{{ strtoupper($value) }}</option>

  @foreach($key->submenu as $subkey=>$subValue) { ?>
  <option value="{{ $subkey->parent_id }}">{{ strtoupper($subValue->name) }}</option>
@endforeach   
@endforeach
</select>

Answer 2

这就是我想出的。我对迁移进行了一些修改：

Schema::create('menus', function (Blueprint $table) {
    $table->increments('id');
    $table->tinyInteger('status')->default(1);
    $table->string('name');
    $table->timestamps();
});

Schema::create('sub_menus', function (Blueprint $table) {
    $table->increments('id');
    $table->tinyInteger('status')->default(1);
    $table->unsignedInteger('menu_id');
    $table->string('title');
    $table->timestamps();

    $table->foreign('menu_id')
        ->references('id')
        ->on('menus')
        ->onDelete('cascade');
});

Schema::create('pages', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('menu_id');
    $table->integer('submenu_id');
    $table->integer('status')->default(1);
    $table->text('description');
    $table->softDeletes();
    $table->timestamps();
});

然后从控制器内部

$menus = Menu::where('status', 1)->orderBy('name')->get()->map(function(Menu $menu) {
    return [
        'name' => $menu->name,
        'value' => $menu->id,
    ];
});

$subMenus = SubMenu::where('status', 1)->orderBy('title')->get()->map(function(SubMenu $subMenu) {
    return [
        'name' => $subMenu->title,
        'value' => $subMenu->id,
        'menu_id' => $subMenu->menu_id,
    ];
})->groupBy('menu_id');

return view('menu.index')
    ->with('menus', $menus)
    ->with('subMenus', $subMenus);

您可以看到我使用menu_id字段对子菜单进行了分组，这将代表每个子菜单集合的索引 - 这样我们就可以在视图中轻松替换它们。

我添加了2个简单的VueJs组件

Form.vue

<script>
    export default {
        props: {
            inputs: {
                type: Object,
                required: true,
            }
        },
        data() {
            return {
                fields: this.inputs
            }
        },
    }
</script>

DependableMenu.vue

<template>
    <div>
        <slot :options="options"></slot>
    </div>
</template>
<script>
    export default {
        props: {
            parentValue: {
                type: [Number, String],
                default: null,
            },
            records: {
                type: [Object, Array],
                default: () => [],
            }
        },
        data() {
            return {
                options: []
            }
        },
        mounted() {
            this.filterRecords(this.parentValue);
        },
        methods: {
            filterRecords(parent_id) {
                if (!parent_id) {
                    this.options = [];
                }
                this.options = this.records[parent_id] || [];
            }
        },
        watch: {
            parentValue(parent_id) {
                this.filterRecords(parent_id);
            }
        }
    }
</script>

在resources/assets/js/app.js内注册

Vue.component('form-wrapper', require('./components/Form'));
Vue.component('dependable-menu', require('./components/DependableMenu'));

最后menu/index.blade.php查看表单

<form-wrapper :inputs="{ menu_id: '', submenu_id: '' }" inline-template>
    <form action="/" method="post">
        {{ csrf_field() }}
        <select name="menu_id" v-model="fields.menu_id">
            <option value="">Select menu</option>
            @foreach($menus as $menu)
            <option value="{{ $menu['value'] }}">{{ $menu['name'] }}</option>
            @endforeach
        </select>
        <dependable-menu :parent-value="fields.menu_id" :records="{{ $subMenus }}">
            <div slot-scope="props">
                <select name="submenu_id">
                    <option value="">Select sub-menu</option>
                    <option v-for="option in props.options" :key="option.value" :value="option.value" v-text="option.name"></option>
                </select>
            </div>
        </dependable-menu>
        <button type="submit">SUBMIT</button>
    </form>
</form-wrapper>

在本地测试 - 所有工作，但尝试你的结束，看看它是如何进行的。