要求:
Elementui Tree 樹形控件,將勾選選中的值放在list集合裏面提交
提交格式是這樣的,也就是將勾選項放在一個數組裏面,作爲參數提交給後端即可。
步驟:
這裏我用到了json本地的數據,因爲掉接口數據,不太方便寫demo,後面統一都用到mock,json數據了,如果需要用到項目裏面,後面直接修改一下
將
//獲取樹權限節點接口定義
getZtreeList() {
this.dataLoading = true;
import("./mock").then((res) => {
this.setTree = res.data;
this.organList = res.data.map((a) => ({
label: a.description,
value: a.id,
}));
this.getListData();
this.dataLoading = false;
});
},
改成這樣即可
//調用接口
import {getZtreeList} from "@/api/permission/role";
//獲取樹權限節點接口定義
getZtreeList() {
this.dataLoading = true;
getZtreeList(params).then((res) => {
this.setTree = res.data;
this.organList = res.data.map((a) => ({
label: a.description,
value: a.id,
}));
this.getListData();
this.dataLoading = false;
});
},
話不多說了,來看具體的操作吧
1:在views底下新建一個test文件夾
裏面新建一個vue文件和一個json文件
2:使用
mock.json
{
"msg": "success",
"code": 1,
"data": [
{
"id": 2,
"permissionToken": "data_spectaculars_token1",
"description": "數據看板",
"parentId": 1,
"checked": true
},
{
"id": 3,
"permissionToken": "data_spectaculars_stat_token2",
"description": "統計看板",
"parentId": 2,
"checked": true
},
{
"id": 4,
"permissionToken": "data_spectaculars_health_token2",
"description": "健康看板",
"parentId": 2,
"checked": true
},
{
"id": 1,
"permissionToken": "system_token0",
"description": "系統權限",
"parentId": 0,
"checked": false
},
{
"id": 5,
"permissionToken": "account_management_token1",
"description": "賬戶管理",
"parentId": 1,
"checked": false
},
{
"id": 6,
"permissionToken": "account_management_user_token2",
"description": "用戶管理",
"parentId": 5,
"checked": false
},
{
"id": 7,
"permissionToken": "account_management_permission_token2",
"description": "權限管理",
"parentId": 5,
"checked": false
},
{
"id": 8,
"permissionToken": "data_management_token1",
"description": "數據管理",
"parentId": 1,
"checked": false
},
{
"id": 9,
"permissionToken": "data_management_organ_token2",
"description": "部門管理",
"parentId": 8,
"checked": false
},
{
"id": 10,
"permissionToken": "data_management_config_token2",
"description": "數據配置",
"parentId": 8,
"checked": false
},
{
"id": 11,
"permissionToken": "data_management_staff_token2",
"description": "人員管理",
"parentId": 8,
"checked": false
},
{
"id": 12,
"permissionToken": "data_management_asset_token2",
"description": "資產管理",
"parentId": 8,
"checked": false
},
{
"id": 13,
"permissionToken": "device_management_token1",
"description": "設備管理",
"parentId": 1,
"checked": false
}
]
}
3:test.vue實例代碼
<template>
<div class="ztree">
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="checkHandler"
>
</el-tree>
<el-button type="primary" @click="createData()">確定</el-button>
</div>
</template>
<script>
export default {
data() {
return {
setTree: [],
defaultProps: {
children: "children",
label: "description",
},
treeData: [],
organList: [],
questionForm: {
//permissionTokens: [],
},
};
},
watch: {},
created() {
//加載樹節點
this.getZtreeList();
},
methods: {
//樹文件勾選事件
checkHandler(...value) {
let a = value[1].checkedNodes.map((a) => a.description);
let b = value[1].checkedNodes.map((a) => a.permissionToken);
console.log(a);
this.questionForm.description = a;
this.questionForm.permissionToken = b;
},
//獲取樹權限節點接口定義
getZtreeList() {
this.dataLoading = true;
import("./mock").then((res) => {
this.setTree = res.data;
this.organList = res.data.map((a) => ({
label: a.description,
value: a.id,
}));
this.getListData();
this.dataLoading = false;
});
},
//對json的格式的轉化
getListData() {
let dataArray = [];
this.setTree.forEach(function (data) {
let parentId = data.parentId;
if (parentId === 0) {
let objTemp = {
id: data.id,
description: data.description,
permissionToken: data.permissionToken,
parentId: parentId,
};
dataArray.push(objTemp);
}
});
this.treeData = this.data2treeDG(this.setTree, dataArray);
},
data2treeDG(datas, dataArray) {
for (let j = 0; j < dataArray.length; j++) {
let dataArrayIndex = dataArray[j];
let childrenArray = [];
let Id = dataArrayIndex.id;
for (let i = 0; i < datas.length; i++) {
let data = datas[i];
let parentId = data.parentId;
if (parentId == Id) {
//判斷是否爲兒子節點
let objTemp = {
id: data.id,
description: data.description,
permissionToken: data.permissionToken,
parentId: parentId,
};
childrenArray.push(objTemp);
}
}
dataArrayIndex.children = childrenArray;
//console.log("打印childrenArray", dataArrayIndex.children);
if (childrenArray.length > 0) {
//有兒子節點則遞歸
this.data2treeDG(datas, childrenArray);
}
}
// console.log("打印處理過的json", dataArray);
return dataArray;
},
//添加角色
async createData() {
const params = this.questionForm;
alert(JSON.stringify(params));
},
},
};
</script>
效果: