This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Using ElementUI already has a period of time, in the side to fit the development background management system’s colleague, also recorded some notes, has not time to sum up, the odd note into a more detail tutorial system, can be left to look at, just saw on the nuggets about August more challenge activity, After reading it, I was moved and decided to spend some time and energy to participate in this more meaningful activity.

In the development process, it is true that a large part of the documents are used. It is said that front-end development cannot be separated from documents. The important words say three times, must read more documents.

Manage back-end solutions

Vue-element-admin is a back-end front-end solution based on vUE and Element-UI implementations.

The positioning of this project is the background integration scheme, which is not suitable for secondary development when the basic template. Because this project integrates a lot of functionality that you may not need, there is a lot of code redundancy. If your project doesn’t focus on this, you can build on it directly.

Vue+ElementUI build background management system (actual combat series five) – ElementUI Tree Tree control

/#/ eleme.eleme. IO /#/ zh-cn /com…

In the document, we can get the basic use of static trees, but we won’t copy them here. Just watch it a few times.

Importantly, Tree, a Tree control interaction is how to do it, for the back-end to data, is how to deal with, and then some echo data, how to check the selected node data acquisition and to submit, the mouse on the node, delete symbols, delete nodes, and these are all need to make great efforts to study the.

Step by step to achieve: first of all, the simplest is the problem of data display, after obtaining data, how to render into a tree.

Not much to say about the preparation, to see the specific operation

1: Create a vue file and a JSON file in the test folder under views

2: Mock. Json

{ "msg": "success", "code": 1, "data": [ { "id": 2, "permissionToken": "data_spectaculars_token1", "description": {"id": 3, "permissionToken": "data_spectacularS_STAT_TOken2 ", "description": "Checked ", "parentId": 2, "checked": true}, {"id": 4, "permissionToken": "Data_spectaculars_health_token2 ", "description":" health Board ", "parentId": 2, "checked": true}, {"id": 1, "permissionToken": "system_TOken0 "," Description ": "System permission ", "parentId": 0, "checked": false}, {"id": 5, "permissionToken": "account_Management_token1 "," Description ": "Account Management ", "parentId": 1, "checked": false}, {"id": 6, "permissionToken": "account_Management_user_Token2 "," Description ": "User Management ", "parentId": 5, "checked": False}, {"id": 7, "permissionToken": "account_Management_permission_token2 "," Description ": "permission management ", "parentId": 5, "checked": false } ] }Copy the code
Expanded by default and selected by default

Run the default-expanded-keys command to set the default expanded nodes. Note that node-key must be set, and its value is the name of a field in the node data that is unique in the tree.

What I want to do here is to add default-expand-all to the el-Tree to expand all nodes by default after obtaining the data.

<el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check="checkHandler"
    >
    </el-tree>
Copy the code
How does vue get the currently selected node of the Elementui Tree control

In this case, the tree file check event is bound to the @check=”checkHandler” event on el-Tree

// The tree file checks the event 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; },Copy the code
Elementui Tree Removes child nodes

Function: When the mouse across the Tree Tree control node, there will be a delete button click delete button, will appear a popup asking whether to delete select delete, then delete the Tree node (the upper parent node can not be deleted)

1: The first step, of course, is to add and remove elements

In the documentation, it says:

Customizing tree node content can be done in two ways: render-content and scoped slot. Use render-content to specify the render function that returns the desired node area content. Refer to the Vue documentation for the use of the render function. Scoped slot passes in node and data, which represent the node object of the current node and the data of the current node. Note: Since Jsfiddle does not support JSX syntax, the render-content example does not work in jsfiddle. But in a real project, as long as the dependencies are configured correctly, it works fine.

So what we use today is still

:render-content="renderContent"

Copy the code

So let’s just assign this example, which is in the document, to our project code, which is straightforward and crude.

Need to pay attention to the place because the function is, when the mouse across the tree control of the child node when the icon will appear to delete the need to set isHover: false when rendering

 isHover: false,
Copy the code

Finally, the test. The 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" :render-content="renderContent" > </el-tree> <el-button Type ="primary" @click="createData()"> </el-button> </div> </template> <script> </ import {deleteSubject} from  "@/api/data/organ"; export default { data() { return { setTree: [], defaultProps: { children: "children", label: "description", }, treeData: [], organList: [], questionForm: { }, }; }, created() {// load the tree node this.getztreelist (); }, methods: { renderContent(h, { node, data, store }) { console.log(data); return ( <span class="custom-tree-node" on-mouseenter={() => (data.isHover = true)} on-mouseleave={() => (data.isHover =  false)} > <span>{data.description}</span> {data.parentId ! == 0 && data.isHover && ( <i class="el-icon-error danger" on-click={(e) => { e.stopPropagation(); this.remove(node, data); }} ></i> )} </span> ); }, remove(node, data) {this.$confirm(" This operation will permanently delete this item. Do you want to continue?") {confirmButtonText: "confirmButtonText ", cancelButtonText:" confirmButtonText ", type: "warning", }) .then(() => { this.handleDelete(null, data); if (data.parentId === 0) { return; } const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex((d) => d.id === data.id); children.splice(index, 1); $message({type: "success", message: "deletion succeeded!"); }); }). The catch (() = > {enclosing $message ({type: "info", the message: "has been delete,"}); }); }, // call handleDelete(index, row) {}, // check the event 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; }, // Get the tree permission node interface definition 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; }); }, 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, isHover: false, }; childrenArray.push(objTemp); } } dataArrayIndex.children = childrenArray; if (childrenArray.length > 0) { this.data2treeDG(datas, childrenArray); } } return dataArray; }, // Add async createData() {const params = this.questionForm; alert(JSON.stringify(params)); ,}}}; </script> <style lang="scss"> .danger { color: red; } </style>Copy the code

Adds the effect of the selected node

The effect of removing a node