在php视图文件中使用element ui

使用element ui的级联选择器

一、通过CDN的方式引入CSS、JS文件

<!--引入element ui的样式文件-->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
<!-- 在引入element之前，先引入vue -->
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<!-- 引入element ui的js文件 -->
<script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、使用element ui的级联选择器

<!--1.定义name和id属性，是为了方便使用js对元素进行操作（只是初学练习，当前网页混合使用了jq和element ui）
2.clearable定义输入框可清空
3.options定义可选项的数据源
4.@change定义，输入框内的值改变时触发的的方法
5.props的expandTrigger参数定义次级菜单的展开方式，hover表示鼠标悬浮在上面时展开,click表示单击展开
6.filterable表示可手动搜索选项-->
<div id="pickup-zone">
<el-cascader name="pickupzone" id="pickupzone" v-model="value" clearable placeholder="请选择地区" :options="pickupZoneOptions" @change="handleChange" :props="{ expandTrigger: 'hover' }" filterable></el-cascader>
</div>
<!--通过一个隐藏的dom元素，将级联选择器的值传递到后台-->
 <input type="text" id="hidden-pickupzone" name="hidden-pickupzone" style="display: none">

三、

//实例化vue，使用element-ui控件，显示级联选择器，通过axios异步加载数据源
    var Main = {
        data() {
            return {
                value: [],
                pickupZoneOptions: [],
            }
        },
        methods: {
        //输入框内的值改变时，调用的方法
            handleChange(value) {
                console.log(value);
                //通过js删除一个不是通过vue实例化的dom元素
                var pickupzone = document.getElementById("pickup-zone");
                var errormsg = document.getElementById("oerror");
                pickupzone.removeChild(errormsg);
                //通过一个隐藏的dom元素，将element ui级联选择器的值传递到后台
                document.getElementById("hidden-pickupzone").value = value;
            }
        },
        mounted() {
            let tags = {
                tag: ''
            }
            //通过axios获取后台数据源，并赋值给级联选择器
            axios.post('index.php/getpickupzone', tags).then(res => {
                this.pickupZoneOptions = res.data;
            })
        },
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#pickup-zone');

四、后端提供的数据（PHP语言、tp5框架）

    //获取拖车网点地址，返回到前端
    public function getpickupzone(Request $request)
    {
        $data = [];
        if($request->param('tag')==''||$request->param('tag')==null){
            //获取所有的省份的id和名称
            $province = FivChinazoneCode::where('level',1)->field('id,title')->select();
            //遍历所有的省份，定义数据源的value、label、leaf
            foreach ($province as $key => $value) {
                $data[$key]['value'] = $value->id;
                $data[$key]['label'] = $value->title;
                $data[$key]['leaf'] = false;
                //获取每一个省份包含的城市的id和名称
                $city = FivChinazoneCode::where('pid', $value->id)->field('id,title')->select();
                //遍历所有的城市，作为省份的children，并定义每一个children的value、label和leaf
                foreach ($city as $keyt => $valuet) {
                    $data[$key]['children'][$keyt]['value'] = $valuet->id;
                    $data[$key]['children'][$keyt]['label'] = $valuet->title;
                    $data[$key]['children'][$keyt]['leaf'] = false;
                    //获取每一个城市包含的区域的id和名称
                    $zone = FivChinazoneCode::where('pid', $valuet->id)->field('id,title')->select();
                    //遍历所有的区域，作为城市的children，并定义每一个children的value、label和leaf
                    foreach ($zone as $keyth => $valueth) {
                        $data[$key]['children'][$keyt]['children'][$keyth]['value'] = $valueth->id;
                        $data[$key]['children'][$keyt]['children'][$keyth]['label'] = $valueth->title;
                        $data[$key]['children'][$keyt]['children'][$keyth]['leaf'] = true;
                    }
                }
            }
        }
        return json($data);
    }

更多相关文章

随机推荐