欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在php视图文件中使用element ui

程序员文章站 2022-03-03 22:41:13
...

使用element ui的级联选择器

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

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

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

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

三、

  1. //实例化vue,使用element-ui控件,显示级联选择器,通过axios异步加载数据源
  2. var Main = {
  3. data() {
  4. return {
  5. value: [],
  6. pickupZoneOptions: [],
  7. }
  8. },
  9. methods: {
  10. //输入框内的值改变时,调用的方法
  11. handleChange(value) {
  12. console.log(value);
  13. //通过js删除一个不是通过vue实例化的dom元素
  14. var pickupzone = document.getElementById("pickup-zone");
  15. var errormsg = document.getElementById("oerror");
  16. pickupzone.removeChild(errormsg);
  17. //通过一个隐藏的dom元素,将element ui级联选择器的值传递到后台
  18. document.getElementById("hidden-pickupzone").value = value;
  19. }
  20. },
  21. mounted() {
  22. let tags = {
  23. tag: ''
  24. }
  25. //通过axios获取后台数据源,并赋值给级联选择器
  26. axios.post('index.php/getpickupzone', tags).then(res => {
  27. this.pickupZoneOptions = res.data;
  28. })
  29. },
  30. };
  31. var Ctor = Vue.extend(Main);
  32. new Ctor().$mount('#pickup-zone');

四、后端提供的数据(PHP语言、tp5框架)

  1. //获取拖车网点地址,返回到前端
  2. public function getpickupzone(Request $request)
  3. {
  4. $data = [];
  5. if($request->param('tag')==''||$request->param('tag')==null){
  6. //获取所有的省份的id和名称
  7. $province = FivChinazoneCode::where('level',1)->field('id,title')->select();
  8. //遍历所有的省份,定义数据源的value、label、leaf
  9. foreach ($province as $key => $value) {
  10. $data[$key]['value'] = $value->id;
  11. $data[$key]['label'] = $value->title;
  12. $data[$key]['leaf'] = false;
  13. //获取每一个省份包含的城市的id和名称
  14. $city = FivChinazoneCode::where('pid', $value->id)->field('id,title')->select();
  15. //遍历所有的城市,作为省份的children,并定义每一个children的value、label和leaf
  16. foreach ($city as $keyt => $valuet) {
  17. $data[$key]['children'][$keyt]['value'] = $valuet->id;
  18. $data[$key]['children'][$keyt]['label'] = $valuet->title;
  19. $data[$key]['children'][$keyt]['leaf'] = false;
  20. //获取每一个城市包含的区域的id和名称
  21. $zone = FivChinazoneCode::where('pid', $valuet->id)->field('id,title')->select();
  22. //遍历所有的区域,作为城市的children,并定义每一个children的value、label和leaf
  23. foreach ($zone as $keyth => $valueth) {
  24. $data[$key]['children'][$keyt]['children'][$keyth]['value'] = $valueth->id;
  25. $data[$key]['children'][$keyt]['children'][$keyth]['label'] = $valueth->title;
  26. $data[$key]['children'][$keyt]['children'][$keyth]['leaf'] = true;
  27. }
  28. }
  29. }
  30. }
  31. return json($data);
  32. }