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

javascript 复制代码
<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>
相关推荐
_Legend_King10 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
J总裁的小芒果11 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
ZwaterZ1 天前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六1 天前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保1 天前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~1 天前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
大霞上仙1 天前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛1 天前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
白臻2 天前
使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题
前端·vue.js·elementui
吃葡萄不吐葡萄皮嘻嘻2 天前
el-table实现最后一行合计功能并合并指定单元格
前端·vue.js·elementui