一 、概述
本文主要是在Element-UI+VUE框架下，利用el-select 、el-tree 组件实现了下拉框多选、回显的效果，如下图：
二、实例代码
1. HTML代码
<el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags @change="selectChange">
<el-option :value="mineStatusValue" style="height: auto">
<el-tree :data="remarksItemList" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
</el-option>
</el-select>2. JS代码
<script>
var vm = new Vue({
el: '#app',
data: {
mineStatus: "",
mineStatusValue: [],
remarksItemCheckedList:[], // 回显数据["A","B"]
remarksItemList:[ //树形数据
{
"id":"A",
"name":"A",
"child":[]
},
{
"id":"B",
"name":"B",
"child":[]
},
{
"id":"C",
"name":"C",
"child":[]
},
{
"id":"D",
"name":"D",
"child":[
{"id":"D①","name":"①","child":[]},
{"id":"D②","name":"②","child":[]},
{"id":"D③","name":"③","child":[]},
{"id":"D④","name":"④","child":[]}
]
},
{
"id":"E",
"name":"E",
"child":[
{"id":"E①","name":"①","child":[]},
{"id":"E②","name":"②","child":[]},
{"id":"E③","name":"③","child":[]}
]
},
{
"id":"F",
"name":"F",
"child":[]
},
{
"id":"G",
"name":"G",
"child":[]
},
{
"id":"H",
"name":"H",
"child":[
{"id":"H①","name":"①","child":[]},
{"id":"H②","name":"②","child":[]},
{"id":"H③","name":"③","child":[]}
]
},
{
"id":"I",
"name":"I",
"child":[
{"id":"I①","name":"①","child":[]},
{"id":"I②","name":"②","child":[]},
{"id":"I③","name":"③","child":[]}
]
}
],
checkedRemarksItem: [],
defaultProps: {
children: "child",
label: "name"
},
title: '住院患者Braden 压疮风险评估表'
},
watch: {
filterText: function(val) {
debugger;
this.$refs.remarksItemList.filter(val);
}
},
methods: {
//select框值改变时候触发的事件
selectChange(e){
var arrNew = [];
var dataLength = this.mineStatusValue.length;
var eleng = e.length;
for(let i = 0; i< dataLength ;i++){
for(let j = 0; j < eleng; j++){
if(e[j] === this.mineStatusValue[i].name){
arrNew.push(this.mineStatusValue[i])
}
}
}
this.checkedRemarksItem = arrNew;
this.$refs.tree.setCheckedKeys(this.remarksItemCheckedList);
// this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
},
handleCheckChange() {
let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
var parentKey = this.$refs.tree.getCheckedKeys();
var childKey = this.$refs.tree.getHalfCheckedKeys();
vm.remarksItemCheckedList = parentKey.concat(childKey);
vm.assessment.nursingMeasures = vm.remarksItemCheckedList;
let arrLabel = [];
let arr = [];
res.forEach(item => {
arrLabel.push(item.name);
arr.push(item);
});
this.mineStatusValue = arr;
this.mineStatus = arrLabel;
}
},
created: fnInitData
})
function beginFun(){
let nursingMeasures = JSON.parse(this.assessment.nursingMeasures);
var arrNew = [];
nursingMeasures.forEach(item => {
var childObj = item.childId;
var id = item.id;
arrNew.push(id)
for (var i = 0; i < childObj.length; i++) {
if(i == childObj.length){
arrNew.push(id.concat(whatNumber(childObj)));
}else{
arrNew.push(id.concat(whatNumber(childObj)).concat(","));
}
}
});
this.remarksItemCheckedList = arrNew;
this.$refs.tree.setCheckedKeys(this.remarksItemCheckedList); //树形结构数据回显
}
function extracted(nursingTree, DChildTree, EChildTree, HChildTree, IChildTree) {
if (DChildTree.length > 0) {
var parentObj = {};
parentObj["id"] = "D";
parentObj["isCheck"] = "true";
parentObj["childId"] = DChildTree;
nursingTree.push(parentObj);
}
if (EChildTree.length > 0) {
var parentObj = {};
parentObj["id"] = "E";
parentObj["isCheck"] = "true";
parentObj["childId"] = DChildTree;
nursingTree.push(parentObj);
}
if (HChildTree.length > 0) {
var parentObj = {};
parentObj["id"] = "H";
parentObj["isCheck"] = "true";
parentObj["childId"] = DChildTree;
nursingTree.push(parentObj);
}
if (IChildTree.length > 0) {
var parentObj = {};
parentObj["id"] = "I";
parentObj["isCheck"] = "true";
parentObj["childId"] = IChildTree;
nursingTree.push(parentObj);
}
}
function endFun(){
if (this.assessment.nursingMeasures){
var nursingTree =[];
var DChildTree =[];
var EChildTree =[];
var HChildTree =[];
var IChildTree =[];
for (var i = 0; i < this.remarksItemCheckedList.length; i++) {
var item = this.remarksItemCheckedList[i];
if(item.indexOf("D") != -1 && item.length == 2){
var tempval = item.substr(item.length-1,1)
DChildTree.push(whatNumber(tempval));
}
if(item.indexOf("E") != -1 && item.length == 2){
var tempval = item.substr(item.length-1,1)
EChildTree.push(whatNumber(tempval));
}
if(item.indexOf("H") != -1 && item.length == 2){
var tempval = item.substr(item.length-1,1)
HChildTree.push(whatNumber(tempval));
}
if(item.indexOf("I") != -1 && item.length == 2){
var tempval = item.substr(item.length-1,1)
IChildTree.push(whatNumber(tempval));
}
if((item.indexOf("A") != -1 || item.indexOf("B") != -1 || item.indexOf("C") != -1 || item.indexOf("F") != -1 || item.indexOf("G") != -1) && item.length == 1){
var parentObj = {};
parentObj["id"] = item;
parentObj["isCheck"] = "true";
parentObj["childId"] = [];
nursingTree.push(parentObj);
}
}
extracted(nursingTree, DChildTree, EChildTree, HChildTree, IChildTree);
this.assessment.nursingMeasures = JSON.stringify(nursingTree);
}
if (this.assessment.resultScore <= 12){
this.assessment.isHighRisk = 1;
}else{
this.assessment.isHighRisk = 0;
}
}
function whatNumber(mealtime) {
let food = '';
switch (mealtime) {
case '1':
food = '①';
break;
case '2':
food = '②';
break;
case '3':
food = '③';
break;
case '4':
food = '④';
break;
case '①':
food = '1';
break;
case '②':
food = '2';
break;
case '③':
food = '3';
break;
case '④':
food = '4';
break;
default:
food = '0';
}
return food;
}
</script>
三、参考资料：
资料二：https://blog.csdn.net/sqlquan/article/details/84636595
8061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
