bab-icon/resources/views/admins/roles/create.blade.php

<div style="margin-top: 10px;" id="roles-app">
    <div style="text-align: center;margin-top: 5px;margin-bottom: 10px;font-size: 20px;">
        新增 - 角色
    </div>
    <el-form action="{{route('admin.role.save')}}" method="post" id="form-create">
        <!-- link -->
        <ui-input-text label="角色名称" name="name" placeholder="角色名称" maxlength="255" tips="用于设置用户分配权限" autofocus="true"></ui-input-text>
        <ui-radio label="是否开启" :params="params" tips="控制是否上线对应角色"></ui-radio>
        <ui-tree @set-keys="getSelectKeys"></ui-tree>
        <ui-submit></ui-submit>
    </el-form>
</div>


<script type="application/javascript">
    $(function () {
        // 注意：Vue组件一定放在jQuery.validator前面验证
        new Vue({
            el: '#roles-app',
            data :function () {
                return {
                    params: {
                        // 注意：group和attr连个属性都不能省略 就算为空
                        group: {},
                        attr: {
                            name: 'status',   // 当前checkbox框的name属性  【必填】
                            radioCheck:0,   // 当前选中项 int | string   【必填】
                            label: 'el-radio-button', // 当前样式 默认 el-radio 样式 【非必填】
                            radios: [ // 每个checkbox 就是一个json对象     【必填】
                                {
                                    value:0,      // 当前选中时值也就是value属性的值      【必填】
                                    label: '关闭',    // 当前提示文字                 【必填】
                                    disable: false   // 是否禁止点击 默认：false 不禁止
                                },
                                {
                                    value:1,      // 当前选中时值也就是value属性的值      【必填】
                                    label: '开启',    // 当前提示文字                 【必填】
                                    disable: false   // 是否禁止点击 默认：false 不禁止
                                }
                            ]
                        }
                    }
                };
            },
            methods:{
                getSelectKeys:function (select_keys) {
                    console.log('开始接收参数');
                    console.log(select_keys);
                }
            }
        });


        jQuery.validator.setDefaults({
            debug: false,         // 调试模式true不会提交,false允许提交
            success: "success",   // 匹配成功的class样式名称
            errorElement: 'div'   // 兼容el标签时使用(兼容el Vue组件label.error标签问题)
        });
        // 前台数据验证 验证需要设置window.form全局变量
        window.form = $('#form-create').validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 200,
                    normalizer: function ( value ) {
                        return $.trim(value);
                    }
                }
            }
        });
    });
</script>
@include('layouts.admin.form_script')