树多选搜索查询，搜索后选中状态仍保留-Toy模板网

这篇具有很好参考价值的文章主要介绍了树多选搜索查询，搜索后选中状态仍保留。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

树多选搜索查询，搜索后选中状态仍保留,element-ui,vue3,elementui 文章来源地址https://www.toymoban.com/news/detail-685531.html

<template>
  <div class="half-transfer">
    <div class="el-transfer-panel">
      <div>
        <el-checkbox v-model="selectAll" @change="handleSelectAll">全部</el-checkbox>
      </div>
      <el-input v-model="searchInput" placeholder="请输入搜索内容" clearable @clear="clearSearch"></el-input>
      <div class="el-transfer__list">
        <el-tree
          ref="treeRef"
          :data="treeData"
          node-key="key"
          :default-expand-all="true"
          show-checkbox
          :default-checked-keys="checkedKeys"
          :filter-node-method="filterNode"
          @check="handleCheckChange"
        ></el-tree>
      </div>
    </div>
  </div>
</template>

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

到了这里，关于树多选搜索查询，搜索后选中状态仍保留的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！