代码拉取完成，页面将自动刷新
操作第一步:第一级选项如“水和废水”原先是不可选的；
选中一条二级选项如色度后再点击这个tree输入框，第一级选项“水和废水”变得可选了；
2.8.25
{
label: "项目名称",
prop: "testingMethodItemId",
type: "tree",
rules: [{
required: true,
message: "选择项目名称",
trigger: "blur"
}],
lazy:true,
filterText:"请输入项目名称",
dicUrl: "/api/ht-system/dict-biz/dictionary?code=category",
props: {
label: 'dictValue',
value: 'dictKey'
},
treeLoad: (node, resolve) => {
let stop_level = 1;
let level = node.level;
let data = node.data || {}
let code = data.dictKey;
let list = [];
if (level == 0) {
axios.get(`/api/ht-system/dict-biz/dictionary?code=category`).then(res => {
list = res.data.data;
list.shift();
resolve((Array.from(list) || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level,
disabled: true
})
}));
})
}
if (level == 1) {
axios.get(`/api/ht-business/testingmethod/list?itemCategory=${code}`).then(res => {
list = res.data.data;
resolve((Array.from(list) || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level,
disabled: false
})
}));
})
} else {
list = []
resolve((Array.from(list) || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level,
disabled: true
})
}));
}
},
nodeClick:(data, node, nodeComp)=>{
}
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
smallwei
拥有者
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
<script src="../../cdn/vue/vue.js"></script>
<link rel="stylesheet" href="../../cdn/element-ui/theme-chalk/index.css" />
<script src="../../cdn/element-ui/index.js"></script>
<script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://cdn.staticfile.org/xlsx/0.18.2/xlsx.full.min.js"></script>
<link rel="stylesheet" href="../../../lib/index.css" />
<script src="../../../lib/avue.js"></script>
</head>
<body>
<div id="app">
<avue-form :option="option" v-model="form">
</avue-form>
</div>
</body>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
new Vue({
el: '#app',
data() {
return {
data: [],
form: {
},
option: {
column: [
{
label: '树形',
prop: 'input1',
type: 'tree',
lazy: true,
props: {
label: 'name',
value: 'code'
},
treeLoad: (node, resolve) => {
let stop_level = 2;
let level = node.level;
let data = node.data || {}
let code = data.code;
let list = [];
let callback = () => {
resolve((list || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level,
disabled: level == 0
})
}));
}
if (level == 0) {
axios.get(`${baseUrl}/getProvince`).then(res => {
list = res.data;
callback()
})
}
if (level == 1) {
axios.get(`${baseUrl}/getCity/${code}`).then(res => {
list = res.data;
callback()
})
} else if (level == 2) {
axios.get(`${baseUrl}/getArea/${code}`).then(res => {
list = res.data;
callback()
})
} else {
list = []
callback()
}
}
}
],
},
}
},
})
</script>
</html>
示例代码效果如图所示
问题未解决；
登录 后才可以发表评论