vue 自定义el-tree

Posted 2023-02-03 wangmj518

先上效果图

<el-tree
    class="camera-tree"
    :props="props"
    show-checkbox
    :data="cameraTree"
    @check="handleCheckChange"
    ref="tree"
  >
    <span
        class="custom-tree-node"
        slot-scope=" node, data "
        style="width: 100%;display: flex;align-items: center;justify-content: space-between;"
      >
       <label>
          <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
             <div class="words"> node.label </div>
          </el-tooltip>
          <span
              v-if="node.childNodes.length===0"
              :class=" 'statusName': node.data.status === 1 "
            >
               node.data.status === 1 ? '在线' : '离线' 
          </span>
        </label>
        <span
            v-if="node.childNodes.length===0"
            class="history"
            @click="jumpHistory(node.data)"
          >查看历史录像
        </span>
    </span>
</el-tree>

el-tree可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。但我个人还是比较喜欢使用scoped slot，写起来习惯放到template里面了，写法也舒服

export default 
    data() 
        return 
            props: 
                label: 'name',
                isLeaf: 'leaf'
            ,
        
    ,
    methods: 
        // 请求设备列表
        async initTree() 
            const  recode, data  = await getAreaList()
            if (recode === 200) 
                this.cameraTree = data.map((item) => (
                    id: item.id,
                    children: item.cameras,
                    name: item.groupName || item.deviceName
                ))
                // 遍历子节点 及格式
                for (let i = 0; i < this.cameraTree.length; i++) 
                    this.cameraTree[i].children = this.cameraTree[i].children.map((item) => (
                        name: item.deviceName,
                        id: item.deviceCode,
                        status: item.status
                    ))
                
            
        ,
        // el-tree 选择设备
        handleCheckChange(data) 
            console.log('data', data)
            if (this.checkedArr.length === 4) 
                this.$message.error('最多只能勾选4个!')
             else if (data) 
                // 改变时 检测是否存在，存在就删除，不存在就添加
                this.playingList = this.playingList.map((item) => 
                    if (item.id === data.id) 
                          return this.empty()
                     else 
                        return item
                    
                )
                this.checkedArr = this.$refs.tree.getCheckedNodes(true, false)
                if (this.checkedArr.length !== 0) 
                    this.loadingVideo = true
                    this.getUrl()
                 
                 // console.log('checkedArr', this.checkedArr)
                // console.log('playingList', this.playingList)
            
        
    

1人点赞

vue

作者：小小_128
链接：https://www.jianshu.com/p/32f85873d8e1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。