• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

el-tree 为绑定数据添加新属性(页面展示图标)

开发技术 开发技术 1周前 (07-21) 8次浏览
<template>
  <div>
    <div class="user__tree boxsty">
      <avue-tree :option="treeOption" :data="treeData" @node-click="getNodeData">
              <span class="el-tree-node__label" slot-scope="{ node, data }">
                <el-tooltip class="item" effect="dark" content="无数据权限" placement="right-start" v-if="data.isLock">
                  <span>{{ node.label }} <i class="el-icon-lock"></i></span>
                </el-tooltip>
                <span v-if="!data.isLock">
                  <span v-if="data.isRecord">{{ node.label }} <i class="el-icon-check"></i></span>
                  <span v-else>{{ node.label }}</span>
                </span>
              </span>
      </avue-tree>
    </div>


    <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" node-key="id">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.data1);
    this.treeList = this.getNewArray(this.data1);
    console.log(this.treeList)
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeList:[]
      ,
      data1: [{
        label: '一级 1',
        children:[{
          label: '二级 2-1',
          children: []
        },
        ]
      }
      ],
      data: [{
        label: '一级 1',
        children: [
          {
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-3-1',
            children:[]
          }]
          },
          {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1',
              children:[]
            }]
          },
        ]

      }
      ],
    };
  },
  methods: {
    append(data){
      console.log(data);
    }
    ,
    remove(node, data){
      console.log(node);
    }
    ,
    handleNodeClick(data,node,compons) {
      // console.log(data);
      //
      console.log(data);
      console.log(node);
      console.log(compons);

    },
    //为树形结构data添加属性
    getNewArray(vData){
      let nStr= [];

      for(let i=0; i<vData.length ;i++){
        if(vData[i].children.length === 0){
          nStr.push({
            label: vData[i].label,
            isRecord: true,
            children: vData[i].children,
            id: Math.ceil(Math.random()*10000000)
          })
        }
        else {
          nStr.push({
            label: vData[i].label,
            isRecord: true,
            children: this.getNewArray(vData[i].children),
            id: Math.ceil(Math.random()*10000000)
          })
        }
      }

      return nStr;
    }
  }
}
</script>

<style scoped>

</style>


程序员灯塔
转载请注明原文链接:el-tree 为绑定数据添加新属性(页面展示图标)
喜欢 (0)