el-tree子节点添加双击事件

为el-tree子节点添加双击事件

template代码部分：

<el-col :span="8">
                <h3>设备列表层级动态加载数据</h3>
                <el-tree
                        :data="treeData"
                        node-key="id"
                        ref="treeRef"
                        lazy
                        :load="loadNode"
                        :props="dpross"
                        :render-content="renderContent"
                >
                </el-tree>
            </el-col>

script代码部分：

<script lang="tsx" setup>
import { ref } from 'vue'
import { treeLazyData } from '../api/test/test'
import { ElTree } from 'element-plus'
const treeData = ref([])
const dpross = {
    children: 'children',
    label: 'label',
    isLeaf: 'leaf'
}
const treeRef = ref(ElTree)
// 动态加载节点数据
const loadNode = async (node , resolve) => {
    const dealres = ref('')
    if (node.level !== 0) {
        // console.log(treeRef.value!.getCheckedNodes(false, false))
        // console.log('id:' + node.data.id + ',type:' + node.data.type + ',label:' + node.data.label)
        dealres.value = node.data.id
    }
    const ress = await treeLazyData(dealres.value)
    return resolve(ress.data)
}
// 打开视频双击事件
const openCamera = () => {
    console.log('打开视频双击事件====')
}
//设备列表渲染
const renderContent = (h, { node, data, store }) => {
    console.log("nodeID:" + node.data.id + ",label:" + data.label + ",state:" + data.state)
    if (data.type === 'camera') {
    	// 在线状态的设备
        if (data.state === 1) {
            return (<span><svg-icon icon="camera-channel" /><span style="padding-left: 4px;" ondblclick = { openCamera }>{node.label}</span></span>)
        } else {
            return (<span><svg-icon icon="camera-off" /><span style="padding-left: 4px;" ondblclick = { openCamera }>{node.label}</span></span>)
        }
    }
    return (<span>{node.label}</span>)
}
</script>