el-tree转换为表格样式的记录

将树状数据使用css与jq编写成为表格样式

 这首页上的边框我没有处理。css需要进行调整一下

 

<template>
  <div>
    <el-card class="anoCard">
     
      <el-button type="primary" @click="GetAllPermissionList">添加角色</el-button>
    </el-card>
    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="800px">
     <div class="table">
        <el-tree
        class="Tree"
        show-checkbox
        :data="allMenu"
        node-key="permissionId"
        :props="menuProps"
        ref="menuTree"
        :check-on-click-node="true"
        :default-expand-all="true"
        :expand-on-click-node="false"
      >
      <!--check-on-click-node 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 -->
      <!--default-expand-all 是否默认展开所有节点 -->
      <!--expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点 -->
       <!--check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false  -->
      <!-- 自定义节点内容 -->
     <span class="custom-tree-node" slot-scope="{ node, data }" >
            <!-- <span class=especially>{{ node.label }}</span> -->
            <span >{{ node.label }}</span>
     </span>
      </el-tree>
      <button @click="getky">111111</button>
     </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllPermissionList } from "@/api/xxxx";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      dialogVisible: false,//弹框显示
      allMenu: [],//tree数据
      menuProps: {
        label: "menuName",
        children: "sonPermissionList",
      },//props的数据
    };
  },
  created() {
    this.$nextTick(() => {
        this.changeTreeClass()
      })
  },
  mounted() {},
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
   //获取选择的所有关键id值，这个id为prop中绑定的唯一值是一个[] 
    getky(){
      let arr = this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys())
      // concat 将多个数组连接起来
      let arr1 = this.$refs.menuTree.getCheckedKeys()
      let arr2 = this.$refs.menuTree.getHalfCheckedKeys()
      let Arr=[...arr1,...arr2]
      // ...扩展运算符号
      console.log('Arr',Arr);
    },

  
    // 获取角色权限选择tree数据
//这里后端返回的是树状结构数据不需要树状转换
    GetAllPermissionList() {
      this.dialogVisible = true;
      getAllPermissionList().then((res) => {
        const dd=res.data
        // 为了删除子节点父节点中值为null的属性才有了下面的递归函数，也可以直接赋值
        // dd.forEach(item=>{
        //   if (item.sonPermissionList == null) {
        //     delete item.sonPermissionList
        //   }else{
        //     this.recursion(item.sonPermissionList)
        //   }
        //   return dd
        // })
        this.allMenu = dd;
      });
    },
    // recursion(data){
    //   data.forEach(item=>{
    //     if (item.sonPermissionList == null) {
    //       delete item.sonPermissionList
    //     }else{
    //       this.recursion(item.sonPermissionList)
    //     }
    //   })
    // },
    // 改变tree节点样式
    changeTreeClass() {
      // 找到之前做标记的class
      var classDomList = document.getElementsByClassName('especially')
      // 改变这几个样式
      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;'
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.table {
      // overflow: auto;
      // height: 100%;
      width: 100%;
      display:flex; justify-content:center; align-items:center;
   ::v-deep .el-tree {
        border-left: 1px solid #000;
    .el-tree-node__content {
      border-bottom: 1px #000 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 is-expanded is-focusable
    .el-tree-node .is-expanded .is-focusable{
      .el-tree-node__children:last-child{
        display: none;
      }
    }
    .el-tree-node .is-expanded .is-focusable:last-child{
      border-bottom: none;
    }
    .el-tree-node__children {
      display: flex;
      flex-direction: column;
      
      .el-tree-node{
        display: flex;
        padding: 0px !important;
        border-bottom: 1px #000 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: 210px;
          border-right:1px solid #000 ;
          flex-direction: row;  
          flex-wrap: wrap;
        }
        // .el-tree-node__children:last-child{
        //   display: none;
        // }
      }
      .el-tree-node.is-checked{
        .tree-btn {
          display: block !important;
        }
      }
    }
  }

}


}
</style>

  ::v-deep .el-tree {
    margin: 20px;
    border-bottom: 1px #e2e1e1 solid !important;
    .el-tree-node__content {
      border-top: 1px #e2e1e1 solid;
      padding: 5px 10px !important;
      width: 300px;
      height: auto;
      .el-tree-node__expand-icon.el-icon-caret-right {
        display: none;
      }
    }
    .el-tree-node {
      padding: 0 !important;
      display: flex;
    }
    .el-tree-node__children {
      display: flex;
      flex-direction: column;

      .el-tree-node {
        display: flex;
        padding: 0px !important;

        .el-tree-node__content {
          width: 400px;

          .custom-tree-node {
            height: 24px;
            display: flex;
            align-items: baseline;
            .tree-btn {
              margin-left: 10px;
              display: none;
            }
            .el-button {
              padding: 0px !important;
              border-radius: 4px;
              background: #363554;
              color: #ffffff;
            }
          }
        }
        .el-tree-node__children {
          width: 300px;
          flex-direction: row;
          flex-wrap: wrap;
        }
      }
      .el-tree-node.is-checked {
        .tree-btn {
          display: block !important;
        }
      }
    }
  }

第二种方便点的，简单点的样式