在php视图文件中使用element ui
程序员文章站
2022-03-03 22:41:13
...
使用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);
}
推荐阅读
-
在PHP中使用Sockets 从Usenet中获取文件
-
在PHP中使用Sockets:从Usenet中获取文件
-
PHP 中使用 Smarty 之二:配置文件在模板变量中的使用
-
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例_php实例
-
PHP 中使用 Smarty 之二:配置文件在模板变量中的使用_PHP教程
-
PHP 中使用 Smarty 之二:配置文件在模板变量中的使用
-
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例_php实例
-
在PHP中使用Sockets 从Usenet中获取文件
-
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例,模板smarty
-
在PHP中使用Sockets:从Usenet中获取文件_PHP教程