编程知识 cdmana.com

Contrôle de l'arbre en vue converti en style de table

Selon les besoins opérationnels,Pour faire un menu de permission,Faciliter la mise en place des permissions du personnel,L'effet souhaité n'a pas été trouvé sur Internet,J'ai réfléchi,Voici l'image de l'effet:

Permissions de menu.png

1、Obtenir les données de toutes les permissions de l'interface,Si les données obtenues ne sont pas de structure arborescente,Traiter d'abord comme une structure arborescente
(1)vueLes codes sont les suivants::

<div class="table">
       <el-scrollbar style="height: 80%; background-color: #fff">
              <el-tree
                  show-checkbox
                  :check-on-click-node="true"
                  :data="allMenu"
                  default-expand-all
                  node-key="id"
                  :expand-on-click-node="false"
                  :props="menuProps"
                  ref="menuTree"
                  :check-strictly="true">
                </el-tree>
        </el-scrollbar>
 </div> 
Copier le Code

(2)jsLes codes sont les suivants::

data() {
    return {
      allMenu: [], // Tous les menus
      menuProps: {
        label: "menuname",
        children: "children",
      },
    }
  },
Copier le Code

toTree() La façon de s'encapsuler ( Tableau converti en données de structure arborescente ), Dans ma dernière note

created(){
   this.getAllMenu()
},
methods: {
    //  Obtenir tous les menus de permission 
    getAllMenu(){
      menuList({}).then(res => {
        if(res.code === 0) {
          this.allMenu = toTree(res.data);
          console.log(this.allMenu)
        }else {
          this.$message.error(res.message)
        }
      })
    },
}
Copier le Code

L'effet actuel est le suivant :

 Vue de l'effet de contrôle de l'arbre .png

2、 Personnaliser le contenu du noeud de contrôle de l'arbre ( Pour plus de détails sur l'utilisation, voir elementSite officiel), Il y a deux façons de personnaliser votre site Web render-contentEtscoped slot Peut produire des effets , J'utilise ici la deuxième fente scope .

(1) Ajouter pour les noeuds du troisième niveau ‘especially’Nom de la classe,vueLes codes sont les suivants::

<el-tree
     show-checkbox
     :check-on-click-node="true"
     :data="allMenu"
     default-expand-all
     node-key="id"
     :expand-on-click-node="false"
     :props="menuProps"
     ref="menuTree"
     :check-strictly="true">

     <!--  Personnaliser le contenu du noeud  -->
     <span class="custom-tree-node" slot-scope="{ node, data }" >
            <span :class="(node.level == 3)? 'especially':''">{{ node.label }}</span>
     </span>

</el-tree>
Copier le Code

(2)dom Action modifier le style du noeud ,jsLes codes sont les suivants::

watch: {
    //  Menu des permissions d'écoute tree Si le rendu est terminé 
    allMenu: function () {
      this.$nextTick(() => {
        this.changeTreeClass()
      })
    },
  },
methods: {
// Changementtree Styles de noeuds 
    changeTreeClass() {
      //  Trouver ce qui a été marqué avant class
      var classDomList = document.getElementsByClassName('especially')
      //  Changer ces styles 
      for (var i = 0; i < classDomList.length; i++) {
        classDomList[i].parentNode.parentNode.style.cssText = 'width: auto;border: none;'
        classDomList[i].parentNode.parentNode.parentNode.style.cssText = 'border: none;'
        classDomList[i].parentNode.parentNode.nextSibling.style.cssText = 'display: none;'
      }
    },
}
Copier le Code

(3)lessLes codes sont les suivants::

<style lang="less" scoped>
 .table {
      overflow: auto;
      height: 100%;
      /deep/.el-tree {
    .el-tree-node__content {
      border-bottom: 1px #000000 solid;
      padding: 5px 10px !important;
      width: 140px;
      height: auto;
      .el-tree-node__expand-icon.el-icon-caret-right{
        display: none;
      }
    }
    .el-tree-node {
      padding: 0 !important;
      display: flex;
    }
    .el-checkbox.is-disabled.is-checked {
      .el-checkbox__inner{
        background-color: #363554 !important;
        border-color: #363554 !important;
      }
    }
    .el-tree-node__children {
      display: flex;
      flex-direction: column;
      
      .el-tree-node{
        display: flex;
        padding: 0px !important;
        border-bottom: 1px #000000 solid;
        .el-tree-node__content{
          width: 200px;
          border-left: 1px #000000 solid;
          border-right: 1px #000000 solid;
          border-bottom: none;
          .custom-tree-node {
            height: 24px;
            display: flex;
            align-items: center;
            .tree-btn {
              margin-left: 10px;
              display: none;
            }
            .el-button{
              padding: 0px !important;
              border-radius: 4px;
              background: #363554;
              color: #ffffff;
            }
          }
        }
        .el-tree-node__children{
          width: 580px;
          flex-direction: row;  
          flex-wrap: wrap;
        }
      }
      .el-tree-node.is-checked{
        .tree-btn {
          display: block !important;
        }
      }
    }
  }
}
</style>
Copier le Code

Compléter le diagramme

 Compléter le diagramme .png

版权声明
本文为[Puff 123]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914164426022y.html

Scroll to Top