树多选搜索查询，搜索后选中状态仍保留

 
<script setup>
import { ref, reactive, watch, nextTick } from 'vue';
import { ElTree, ElCheckbox, ElInput } from 'element-plus';
 
const searchInput = ref('');
const checkedKeys = ref([]);
const treeData = reactive([
  {
    key: 1,
    label: '选项1',
    children: [
      { key: 11, label: '子选项11' },
      { key: 12, label: '子选项12' },
      { key: 13, label: '子选项13' },
    ],
  },
  {
    key: 2,
    label: '选项2',
    children: [
      { key: 21, label: '子选项21' },
      { key: 22, label: '子选项22' },
      { key: 23, label: '子选项23' },
    ],
  },
]);
const selectAll = ref(false);
const treeRef = ref(null);
 
watch(searchInput, (val) => {
  treeRef.value.filter(val);
});
 
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};
 
const clearSearch = () => {
  searchInput.value = '';
};
 
const handleSelectAll = (checked) => {
  if (checked) {
    checkedKeys.value = getAllNodeKeys();
  } else {
    checkedKeys.value = [];
    treeRef.value.setCheckedKeys([]);
  }
};
 
const getAllNodeKeys = () => {
  const keys = [];
  const traverse = (nodes) => {
    for (const node of nodes) {
      keys.push(node.key);
      if (node.children && node.children.length > 0) {
        traverse(node.children);
      }
    }
  };
  traverse(treeData);
  return keys;
};
 
const handleCheckChange = (data) => {
  checkedKeys.value = data.checkedKeys;
  // 获取树节点选中的id
  console.log(treeRef.value.getCheckedKeys())
  nextTick(() => {
    if (treeRef.value) {
      const nodes = treeRef.value.root.childNodes;
      const allChecked = nodes.every((node) => node.checked);
      selectAll.value = allChecked;
    }
  });
};
script>
 
<style scoped>
.half-transfer {
  margin-top: 20px;
  margin-left: 20px;
  width: 335px;
  height: 260px;
  background: #fff;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
 
.el-transfer-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
 
.el-transfer__list {
  overflow-y: auto;
  border-radius: 4px;
  margin-top: 8px;
}
 
.el-transfer__list .el-checkbox-group {
  padding: 10px;
}
 
.el-transfer__list .el-checkbox {
  display: block;
  margin-bottom: 5px;
  line-height: 24px;
}
 
.el-transfer__list .el-checkbox:last-child {
  margin-bottom: 0;
}
 
.el-transfer__list .el-scrollbar {
  background-color: #f5f7fa;
}
style>