• vue数据结构图以及修改element样式


    <template>
      <div class="weChatToken">
          <el-tree
            :props="defaultProps"
            :data="treeData"
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span style="margin-left:15px;">
                <el-button type="text" size="small" @click="() => append(data)">
                  <i class="el-icon-plus"></i>
                </el-button>
                <el-button type="text" size="small" @click="() => remove(data,node)">
                  <i class="el-icon-delete"></i>
                </el-button>
                <el-button type="text" size="small" @click="() => modify(data)">
                  <i class="el-icon-edit"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          treeData: [],
          defaultExpandedKeys: [],
        };
      },
      methods: {
        // 请求接口数据
        query() {
          this.treeData = [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2'
            }]
          }];
        },
        // 添加
        append(data) {
          console.log(data);
        },
        // 删除
        remove(node, data) {
          console.log(node, data);
        },
        // 编辑
        modify(data) {
          console.log(data);
        },
      },
      created() {
        this.query();
      }
    };
    </script>
    
    <style lang="less" scoped>
    .weChatToken{
      /deep/ .el-tree-node{
        position: relative;
        padding-left: 16px;
      }
      /deep/ .el-tree-node__children{
        padding-left: 16px;
      }
      /deep/ .el-tree-node:last-child:before {
        height: 38px;
      }
      /deep/ .el-tree>.el-tree-node:before{
        border-left: none;
      }
      /deep/ .el-tree>.el-tree-node:after{
        border-top: none;
      }
      /deep/ .el-tree-node:before,/deep/ .el-tree-node:after{
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border- 1px;
      }
      /deep/ .tree:first-child .el-tree-node:before{
        border-left: none;
      }
      /deep/ .el-tree-node:before {
        border-left: 1px solid #4386c6;
        bottom: 0px;
        height: 100%;
        top: -25px;
         1px;
      }
      /deep/ .el-tree-node:after {
        border-top: 1px solid #4386c6;
        height: 20px;
        top: 12px;
         24px;
      }
      /deep/ .el-tree-node__content{
        padding-left: 0px !important;
      }
      /deep/ .el-tree-node__content>.el-tree-node__expand-icon {
          padding: 3px;
      }
    }
    </style>

  • 相关阅读:
    二分
    枚举
    dp
    bfs
    bfs
    dfs
    ipython快捷键
    虚拟机串口连接嵌入式开发板
    rtmp向IR601移植过程(无功能步骤,只有移植步骤)
    静态库和动态库
  • 原文地址:https://www.cnblogs.com/yangzhenhong/p/10956172.html
Copyright © 2020-2023  润新知