|
@@ -35,15 +35,15 @@
|
|
|
/> -->
|
|
|
<el-tree
|
|
|
class="filter-tree siteTree"
|
|
|
- :props="defaultProps"
|
|
|
+ ref="tree"
|
|
|
:data="data"
|
|
|
- @node-click="handleNodeClick"
|
|
|
node-key="id"
|
|
|
+ :props="defaultProps"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
:expand-on-click-node="false"
|
|
|
:highlight-current="showTree"
|
|
|
default-expand-all
|
|
|
- :filter-node-method="filterNode"
|
|
|
- ref="tree"
|
|
|
:current-node-key="defaultExpand"
|
|
|
>
|
|
|
<template #default="{ node, data }">
|
|
@@ -102,7 +102,10 @@
|
|
|
></watch-dog>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="变量列表" name="third">
|
|
|
- <variable-list :activeName="activeName" :siteId="siteId"></variable-list>
|
|
|
+ <variable-list
|
|
|
+ :activeName="activeName"
|
|
|
+ :siteId="siteId"
|
|
|
+ ></variable-list>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="摄像头" name="five">
|
|
|
<camera :siteId="siteId"></camera>
|
|
@@ -172,6 +175,7 @@ export default defineComponent({
|
|
|
},
|
|
|
setup() {
|
|
|
const flag2 = ref(false)
|
|
|
+ const tree = ref(null)
|
|
|
const showTree = ref(true)
|
|
|
const defaultExpand = ref(0)
|
|
|
const showDialog = ref(false)
|
|
@@ -246,10 +250,7 @@ export default defineComponent({
|
|
|
function mouseleave(data) {
|
|
|
data.show = false
|
|
|
}
|
|
|
- function filterNode(value, data) {
|
|
|
- if (!value) return true
|
|
|
- return data.label.indexOf(value) !== -1
|
|
|
- }
|
|
|
+
|
|
|
const handleNodeClick = (data, obj, node) => {
|
|
|
data, node
|
|
|
flag2.value = true
|
|
@@ -270,14 +271,29 @@ export default defineComponent({
|
|
|
console.log('父组件的siteId')
|
|
|
console.log(siteId.value)
|
|
|
}
|
|
|
- const tree = ref(null)
|
|
|
|
|
|
- watch(filterText, (val) => {
|
|
|
- //直接监听
|
|
|
- val
|
|
|
- console.log(tree)
|
|
|
- // tree.value.filter(val)
|
|
|
- })
|
|
|
+ function filterNode(value, data) {
|
|
|
+ if (!value) return true
|
|
|
+ return data.label.indexOf(value) !== -1
|
|
|
+ }
|
|
|
+
|
|
|
+ // 异步任务 用于给tree传值
|
|
|
+ const writeValue = (val) => {
|
|
|
+ return tree.value.filter(val)
|
|
|
+
|
|
|
+ }
|
|
|
+ // 定义 watch 监听
|
|
|
+ watch(
|
|
|
+ filterText,
|
|
|
+ (newCount, old, clear) => {
|
|
|
+ // 执行异步任务,并得到关闭异步任务的 id
|
|
|
+ let id = writeValue(newCount, old)
|
|
|
+ // 如果 watch 监听被重复执行了,则会先清除上次未完成的异步任务
|
|
|
+ clear(() => clearTimeout(id))
|
|
|
+ },
|
|
|
+ // watch 刚被创建的时候不执行
|
|
|
+ { lazy: true }
|
|
|
+ )
|
|
|
|
|
|
// 关闭操作
|
|
|
const closeDialog = () => {
|
|
@@ -367,6 +383,7 @@ export default defineComponent({
|
|
|
flag2,
|
|
|
|
|
|
showTree,
|
|
|
+ tree,
|
|
|
|
|
|
// data2,
|
|
|
// defaultProps2,
|