You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.5 KiB
64 lines
2.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="/lib/element-ui/theme-chalk/index.min.css">
|
|
|
|
<title>前端测试页</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<input type="text" id="select1" style="width:300px;height:30px;text-indent:999999px;">
|
|
<el-cascader ref="select1" :value="['35563696-6123-47ad-8546-6d5dcb975f89','b8843a08-a2f8-40c2-94bb-99430b917a73','507a678a-8fe3-4d91-91d5-faa42f22f910']"
|
|
:options="[{value:'35563696-6123-47ad-8546-6d5dcb975f89',label:'吉林省',children:[{value:'b8843a08-a2f8-40c2-94bb-99430b917a73',label:'长春市',children:[{value:'507a678a-8fe3-4d91-91d5-faa42f22f910',label:'南关区',leaf:true}]}]}]"
|
|
v-on:change="VeChange($event,'select1')"
|
|
:props="{checkStrictly: true,lazy:true,lazyLoad:VeLoad,id:'select1',url:'/IoTCenter/Ajax/Test?parentId='}"></el-cascader>
|
|
</div>
|
|
<script src="/lib/jquery/jquery.min.js"></script>
|
|
<script src="/lib/linq/linq.min.js"></script>
|
|
<script src="/lib/vue/vue.min.js"></script>
|
|
<script src="/lib/element-ui/index.min.js"></script>
|
|
<script src="/lib/element-ui/locale/zh-CN.min.js"></script>
|
|
<script>
|
|
function VeLoad(node, resolve) {
|
|
var parentId = node.root ? null : node.value;
|
|
var url = this.url + parentId;
|
|
$.getJSON(url, function (data) {
|
|
console.log(data);
|
|
var parent = node;
|
|
var nodes = Enumerable.from(data)
|
|
.where(function (o) {
|
|
return !Enumerable.from(parent.children).any(function (o2) {
|
|
return o.value === o2.value;
|
|
});
|
|
})
|
|
.select(function (o) {
|
|
return {
|
|
value: o.value,
|
|
label: o.text,
|
|
leaf: parseInt(o.group.name) === 0
|
|
};
|
|
}).toArray();
|
|
resolve(nodes);
|
|
});
|
|
}
|
|
function VeChange(value, id) {
|
|
app.$refs["select1"].value = value;
|
|
var text = value[value.length - 1];
|
|
$('#' + id).val(text);
|
|
console.log($('#' + id).val());
|
|
}
|
|
</script>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
a: 1
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|