vue 自定义el-tree

先上效果图

image.png

<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)
            }
        }
    }
}