element的tree树形菜单回显、父级设置半选状态
主要代码:
keyList.forEach(key => {
const node = this.$refs.weiTree.getNode(key);
console.log(node.isLeaf)
if (node.isLeaf) {
this.$refs.weiTree.setChecked(node, true);
}
});
完整demo
<template>
<el-dialog title="tree" class="bp-dialog" :visible.sync="treeVisible" width="850px" append-to-body
:close-on-click-modal="false">
<div class="tree-wrap">
<div class="tree-node-header">
<div v-for="(item, index) in treeColumns" :key="index" class="cell">
{{ item.title }}
</div>
</div>
<el-tree ref="weiTree" :data="treeData" :props="defaultProps" show-checkbox node-key="code" default-expand-all
:expand-on-click-node="false">
<div :class="['custom-tree-node',`level${node.level}`] " slot-scope="{ node, data }">
<div class="tree-node-item">
<span v-if="node.label.length<28">{{ node.label }}</span>
<el-tooltip v-else placement="top" effect="light">
<div slot="content" class="checkLabelDesc">{{ node.label }}</div>
<span class="checkLabel">{{ node.label }}</span>
</el-tooltip>
</div>
<div class="tree-node-item" v-if="node.level == 1"></div>
<div class="tree-node-item" v-else>
<span class="thumb" v-for="(item,index) in JSON.parse(data.img)" :key="index">
<el-image v-if="/.(png|jpg|jpeg)$/.test(item.dfsPath)"
:src="item.dfsPath" :preview-src-list="[item.dfsPath]">
</el-image>
<a v-else :href="item.dfsPath" target="_blank">文件</a>
</span>
</div>
<div class="tree-node-item" v-if="node.level == 1">
<el-tag v-if="!data.notCheck">检查</el-tag>
<el-tag v-else type="success">只读</el-tag>
</div>
<div class="tree-node-item" v-else>
<el-tag v-if="[1,2].includes(data.checkResultType)">
{{ checkResultTypeObj[data.checkResultType] }}
</el-tag>
<el-tag v-else type="succcess">
{{ checkResultTypeObj[data.checkResultType] }}
</el-tag>
</div>
<div class="tree-node-item"> {{ data.sort }}</div>
</div>
</el-tree>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleInit">初始化</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCancel">取消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "treeModule",
data() {
return {
checkResultTypeObj: {
1: '定性',
2: '输入',
3: '目测',
4: '定量',
},
defaultProps: {
children: 'points',
label: 'checkContent'
},
treeVisible: true, // tree弹出层
treeColumns: [
{title: ''},
{title: '检查项内容'},
{title: '图片/文件'},
{title: '检查类型/结果'},
{title: '排序'},
],
treeData: [
{
"checkPointId": 23,
"checkContent": "外观类检查条件",
"sort": 1,
"notCheck": true,
"notCheckStr": null,
"deleFlag": false,
"createDate": "2025-05-26 13:28:55",
"createBy": 9,
"updateDate": "2025-05-26 13:29:15",
"updateBy": 9,
"problem": null,
"fileWiId": "14",
"points": [
{
"checkPointId": 40,
"parentId": 0,
"checkContent": "环境条件",
"checkResultType": 3,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 13:47:08",
"createBy": 9,
"updateDate": "2025-05-26 13:47:08",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": "23",
"parentSort": null,
"points": [
{
"checkPointId": 41,
"parentId": 40,
"checkContent": "检验者在正常光度下(大于300LX),目视距离为30cm~50cm的条件下进行检查",
"checkResultType": 3,
"img": "[{\"sort\":0,\"dfsPath\":\"https://qa.digitalbp.siemens.com.cn/dfs/group1/M00/00/5E/ixjsjmgcJUKAMcidAArfvDuPpRg833.png\"}]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 13:47:23",
"createBy": 9,
"updateDate": "2025-05-26 13:47:23",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 1,
"points": null,
"rationList": null,
"historyId": null,
"code": "c6b9be6c-e272-44d3-aff3-f8e2f27cb5d8",
"resultText": null
}
],
"rationList": null,
"historyId": null,
"code": "63334a4b-db6b-4a84-ae89-ed0ae6062986",
"resultText": null
}
],
"historyId": null,
"code": "7b93a2b9-ae9f-4538-b320-ff4b402edb6d",
"remark": null,
"resultText": null
},
{
"checkPointId": 20,
"checkContent": "产品外观检查",
"sort": 2,
"notCheck": false,
"notCheckStr": null,
"deleFlag": false,
"createDate": "2025-05-26 13:27:59",
"createBy": 9,
"updateDate": "2025-05-26 13:29:09",
"updateBy": 9,
"problem": null,
"fileWiId": "14",
"points": [
{
"checkPointId": 42,
"parentId": 0,
"checkContent": "产品外观(注塑类)",
"checkResultType": 1,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 14:10:39",
"createBy": 9,
"updateDate": "2025-05-26 14:10:39",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": "20",
"parentSort": null,
"points": [
{
"checkPointId": 53,
"parentId": 42,
"checkContent": "表面整洁无脏污,无明显划伤,无开裂(缺陷问题严重度依据不同产品类型区分判定)",
"checkResultType": 3,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 14:13:46",
"createBy": 9,
"updateDate": "2025-05-26 14:13:46",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 1,
"points": null,
"rationList": null,
"historyId": null,
"code": "b7caec11-8672-473a-9feb-5f17e597ea9e",
"resultText": null
},
{
"checkPointId": 54,
"parentId": 42,
"checkContent": "表面无注塑缺陷,边角无披锋、无锐边(缺陷问题严重度依据不同产品类型区分判定)",
"checkResultType": 3,
"img": "[]",
"sort": 2,
"deleFlag": false,
"createDate": "2025-05-26 14:14:05",
"createBy": 9,
"updateDate": "2025-05-26 14:14:05",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 1,
"points": null,
"rationList": null,
"historyId": null,
"code": "5f97c005-8874-4fc6-a9d6-67a588784424",
"resultText": null
},
{
"checkPointId": 55,
"parentId": 42,
"checkContent": "表面无明显异色点,色差符合样件等(缺陷问题严重度依据不同产品类型区分判定)",
"checkResultType": 1,
"img": "[]",
"sort": 3,
"deleFlag": false,
"createDate": "2025-05-26 14:14:22",
"createBy": 9,
"updateDate": "2025-05-26 14:14:22",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 1,
"points": null,
"rationList": null,
"historyId": null,
"code": "cc2cb7c9-2a78-45e4-82d2-8328dae988d1",
"resultText": null
},
{
"checkPointId": 56,
"parentId": 42,
"checkContent": "整体结构无变形、缝隙均匀、卡勾卡接牢固,螺钉打紧到位。",
"checkResultType": 1,
"img": "[]",
"sort": 4,
"deleFlag": false,
"createDate": "2025-05-26 14:14:42",
"createBy": 9,
"updateDate": "2025-05-26 14:14:42",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 1,
"points": null,
"rationList": null,
"historyId": null,
"code": "f07dbe24-53bc-4f3a-893e-1cc0d7f31cf3",
"resultText": null
}
],
"rationList": null,
"historyId": null,
"code": "8af1406d-597c-4dff-9b10-97cc34c3083b",
"resultText": null
},
{
"checkPointId": 43,
"parentId": 0,
"checkContent": "产品外观(金属类)",
"checkResultType": 1,
"img": "[]",
"sort": 2,
"deleFlag": false,
"createDate": "2025-05-26 14:10:52",
"createBy": 9,
"updateDate": "2025-05-26 14:11:14",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": "20",
"parentSort": null,
"points": [
{
"checkPointId": 57,
"parentId": 43,
"checkContent": "表面整洁无脏污,无明显划伤,无开裂/开焊,喷漆均匀,无掉漆,无锈蚀陷等(脏污/划伤类问题严重度依据不同产品类型区分判定)",
"checkResultType": 1,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 14:14:58",
"createBy": 9,
"updateDate": "2025-05-26 14:14:58",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 2,
"points": null,
"rationList": null,
"historyId": null,
"code": "df222c19-5164-44ae-bdaf-0cd889c7153d",
"resultText": null
},
{
"checkPointId": 58,
"parentId": 43,
"checkContent": "边角及切割面边缘无披锋、无毛刺(缺陷问题严重度依据不同产品类型区分判定)",
"checkResultType": 1,
"img": "[]",
"sort": 2,
"deleFlag": false,
"createDate": "2025-05-26 14:15:12",
"createBy": 9,
"updateDate": "2025-05-26 14:15:12",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 2,
"points": null,
"rationList": null,
"historyId": null,
"code": "a0ba59f6-49ea-4840-9c0a-410e4f053573",
"resultText": null
},
{
"checkPointId": 59,
"parentId": 43,
"checkContent": "喷漆面无明显异色点,色差符合样件等(缺陷问题严重度依据不同产品类型区分判定)",
"checkResultType": 3,
"img": "[]",
"sort": 3,
"deleFlag": false,
"createDate": "2025-05-26 14:15:30",
"createBy": 9,
"updateDate": "2025-05-26 14:15:30",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 2,
"points": null,
"rationList": null,
"historyId": null,
"code": "d3068423-6bfc-442f-8692-d6545027a547",
"resultText": null
},
{
"checkPointId": 60,
"parentId": 43,
"checkContent": "电镀件表面镀层均匀,颜色一致性较好",
"checkResultType": 1,
"img": "[]",
"sort": 4,
"deleFlag": false,
"createDate": "2025-05-26 14:15:53",
"createBy": 9,
"updateDate": "2025-05-26 14:15:53",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 2,
"points": null,
"rationList": null,
"historyId": null,
"code": "18013a96-c7f6-4341-8b7f-486e21e93a33",
"resultText": null
},
{
"checkPointId": 61,
"parentId": 43,
"checkContent": "整体结构无变形,组装缝隙均匀,螺钉打紧到位。",
"checkResultType": 3,
"img": "[]",
"sort": 5,
"deleFlag": false,
"createDate": "2025-05-26 14:16:26",
"createBy": 9,
"updateDate": "2025-05-26 14:16:26",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 2,
"points": null,
"rationList": null,
"historyId": null,
"code": "c5f715e6-7f02-4b33-99a7-cfea9a11a783",
"resultText": null
}
],
"rationList": null,
"historyId": null,
"code": "725f011a-8c8e-4419-8800-eda1c5626707",
"resultText": null
},
{
"checkPointId": 44,
"parentId": 0,
"checkContent": "产品外观(透窗类)",
"checkResultType": 1,
"img": "[]",
"sort": 3,
"deleFlag": false,
"createDate": "2025-05-26 14:11:07",
"createBy": 9,
"updateDate": "2025-05-26 14:11:07",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": "20",
"parentSort": null,
"points": [
{
"checkPointId": 62,
"parentId": 44,
"checkContent": "玻璃、亚克力等透明部件是否通透,无气泡、划伤、雾化或内部杂质",
"checkResultType": 3,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 14:16:46",
"createBy": 9,
"updateDate": "2025-05-26 14:16:46",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 3,
"points": null,
"rationList": null,
"historyId": null,
"code": "a1e2c538-f5de-416d-ae41-483af1307219",
"resultText": null
}
],
"rationList": null,
"historyId": null,
"code": "511d5051-11c5-4776-bf29-3d50f68c9b72",
"resultText": null
},
{
"checkPointId": 45,
"parentId": 0,
"checkContent": "产品外观(PCBA)",
"checkResultType": 1,
"img": "[]",
"sort": 4,
"deleFlag": false,
"createDate": "2025-05-26 14:11:26",
"createBy": 9,
"updateDate": "2025-05-26 14:11:26",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": "20",
"parentSort": null,
"points": [
{
"checkPointId": 63,
"parentId": 45,
"checkContent": "PCBA型号符合工单、符合图纸\\样件",
"checkResultType": 1,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 14:17:41",
"createBy": 9,
"updateDate": "2025-05-26 14:17:41",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 4,
"points": null,
"rationList": null,
"historyId": null,
"code": "cd8730e1-46b3-4fd3-8038-82c61d2d01db",
"resultText": null
},
{
"checkPointId": 64,
"parentId": 45,
"checkContent": "器件使用正确性符合图纸/样件",
"checkResultType": 3,
"img": "[]",
"sort": 2,
"deleFlag": false,
"createDate": "2025-05-26 14:18:00",
"createBy": 9,
"updateDate": "2025-05-26 14:18:00",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 4,
"points": null,
"rationList": null,
"historyId": null,
"code": "2aeeddf5-cfa8-4728-8bb6-a60bddb6536d",
"resultText": null
},
{
"checkPointId": 65,
"parentId": 45,
"checkContent": "器件极性符合图纸/样件",
"checkResultType": 1,
"img": "[]",
"sort": 3,
"deleFlag": false,
"createDate": "2025-05-26 14:18:24",
"createBy": 9,
"updateDate": "2025-05-26 14:18:24",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 4,
"points": null,
"rationList": null,
"historyId": null,
"code": "0bd4fcd1-fa1b-499b-9823-45b651d3e15f",
"resultText": null
},
{
"checkPointId": 66,
"parentId": 45,
"checkContent": "检查PCBA元器件有无损坏,缺件等不良。",
"checkResultType": 3,
"img": "[]",
"sort": 4,
"deleFlag": false,
"createDate": "2025-05-26 14:18:40",
"createBy": 9,
"updateDate": "2025-05-26 14:18:40",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 4,
"points": null,
"rationList": null,
"historyId": null,
"code": "54520604-97ca-42b9-8af7-7c271602d455",
"resultText": null
},
{
"checkPointId": 67,
"parentId": 45,
"checkContent": "焊点外观、焊点缺陷满足IPC标准要求",
"checkResultType": 1,
"img": "[]",
"sort": 5,
"deleFlag": false,
"createDate": "2025-05-26 14:18:58",
"createBy": 9,
"updateDate": "2025-05-26 14:18:58",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 4,
"points": null,
"rationList": null,
"historyId": null,
"code": "8ddb8701-7a9c-4fd3-8873-9406d9615548",
"resultText": null
}
],
"rationList": null,
"historyId": null,
"code": "4661b160-fef3-4bf3-b355-1de7ca3acee7",
"resultText": null
},
{
"checkPointId": 46,
"parentId": 0,
"checkContent": "产品丝印/镭雕",
"checkResultType": 1,
"img": "[]",
"sort": 5,
"deleFlag": false,
"createDate": "2025-05-26 14:11:45",
"createBy": 9,
"updateDate": "2025-05-26 14:11:45",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": "20",
"parentSort": null,
"points": [
{
"checkPointId": 68,
"parentId": 46,
"checkContent": "产品logo清晰无缺陷",
"checkResultType": 1,
"img": "[]",
"sort": 1,
"deleFlag": false,
"createDate": "2025-05-26 14:19:17",
"createBy": 9,
"updateDate": "2025-05-26 14:19:17",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 5,
"points": null,
"rationList": null,
"historyId": null,
"code": "bdae14b2-1d8f-45ac-a224-c0927b09c856",
"resultText": null
},
{
"checkPointId": 69,
"parentId": 46,
"checkContent": "丝印清晰无缺陷,丝印内容及位置符合图纸/样件要求",
"checkResultType": 1,
"img": "[]",
"sort": 2,
"deleFlag": false,
"createDate": "2025-05-26 14:19:47",
"createBy": 9,
"updateDate": "2025-05-26 14:19:47",
"updateBy": 9,
"standard": 0.000,
"upperLimit": 0.000,
"lowerLimit": 0.000,
"problem": null,
"checkItemId": null,
"parentSort": 5,
"points": null,
"rationList": null,
"historyId": null,
"code": "4997af86-da08-4082-a3a6-aae3967b12df",
"resultText": null
}
],
"rationList": null,
"historyId": null,
"code": "5f853516-b64e-4223-bc82-54a7e481b780",
"resultText": null
}
],
"historyId": null,
"code": "34aa4784-e7bb-432f-be7c-f05ce86b1b19",
"remark": null,
"resultText": null
}
],
}
},
methods: {
show(data) {
console.log(data)
this.treeVisible = true
},
handleInit() {
// let keyList = ['b7caec11-8672-473a-9feb-5f17e597ea9e', '5f97c005-8874-4fc6-a9d6-67a588784424', 'cc2cb7c9-2a78-45e4-82d2-8328dae988d1']
// let keyList = ['34aa4784-e7bb-432f-be7c-f05ce86b1b19', '8af1406d-597c-4dff-9b10-97cc34c3083b', 'b7caec11-8672-473a-9feb-5f17e597ea9e', '5f97c005-8874-4fc6-a9d6-67a588784424', 'cc2cb7c9-2a78-45e4-82d2-8328dae988d1']
let keyList = ['34aa4784-e7bb-432f-be7c-f05ce86b1b19', '8af1406d-597c-4dff-9b10-97cc34c3083b', 'b7caec11-8672-473a-9feb-5f17e597ea9e', '5f97c005-8874-4fc6-a9d6-67a588784424', 'cc2cb7c9-2a78-45e4-82d2-8328dae988d1', 'f07dbe24-53bc-4f3a-893e-1cc0d7f31cf3']
keyList.forEach(key => {
const node = this.$refs.weiTree.getNode(key);
console.log(node.isLeaf)
if (node.isLeaf) {
this.$refs.weiTree.setChecked(node, true);
}
});
},
handleSubmit() {
let checkedKeys = this.$refs.weiTree.getCheckedKeys();
let halfCheckedKeys = this.$refs.weiTree.getHalfCheckedKeys();
let allCheckedKeys = [...halfCheckedKeys, ...checkedKeys];
console.log(allCheckedKeys);
// this.treeVisible = false
},
handleCancel() {
this.treeVisible = false
},
}
}
</script>
<style lang="scss" scoped>
.checkLabelDesc {
width: 350px;
line-height: 20px;
}
.tree-wrap {
max-height: 550px;
overflow-y: auto;
border: 1px solid #dfe6ec;
.tree-node-header {
display: flex;
width: 100%;
background: #f8f8f9;
border-bottom: 1px solid #dfe6ec;
overflow: hidden;
.cell {
&:first-child {
flex: none;
width: 46px;
//width: 100px;
border-left: none;
}
&:nth-child(2) {
flex: 1;
}
&:nth-child(5) {
width: 50px;
}
width: 120px;
padding: 7px 2px;
color: #515a6e;
height: 49px;
line-height: 35px;
font-size: 13px;
border-left: 1px solid #dfe6ec;
font-weight: bold;
text-align: center;
word-break: break-word;
box-sizing: border-box;
}
}
::v-deep .el-tree-node__content {
height: 43px;
border-bottom: 1px solid #dfe6ec;
}
.custom-tree-node {
display: flex;
width: 100%;
height: 43px;
line-height: 43px;
.tree-node-item {
width: 120px;
padding: 0 5px;
color: #515a6e;
text-align: center;
height: 43px;
line-height: 43px;
font-size: 13px;
word-wrap: break-word;
border-left: 1px solid #dfe6ec;
.checkLabel {
display: block;
width: 100%;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:first-child {
flex: 1;
text-align: left;
padding: 0 8px;
}
&:nth-child(4) {
width: 50px;
}
.thumb {
display: block;
padding: 4px;
width: 42px;
height: 42px;
box-sizing: border-box;
::v-deep .el-image {
width: 34px;
height: 34px;
.el-image__inner {
object-fit: cover;
}
}
}
}
.tree-node-box {
display: flex;
}
}
//.level1{
// margin-left: 54px;
//}
//.level2{
// margin-left: 36px;
//}
//.level3{
// margin-left: 18px;
//}
}
</style>
版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://www.liweiliang.com/1181.html
- 上一篇: ElementUI 中 Table expend嵌套另一个子Table,fixed+嵌套多选实现
- 下一篇: 没有了
评论已关闭