vue3左树的全选和反选

html 复制代码
 <el-input v-model="filterText" placeholder="" style="width: 48%"/>
                  <el-button type="primary" @click="handleSearch" class="ml-2">查找</el-button>
                  <el-radio-group v-model="form.choice" @change="handleCheckAll">
                    <el-radio label="all" class="ml-2">全选</el-radio>
                    <el-radio label="invert">反选</el-radio>
                  </el-radio-group>
                  <el-tree
                    ref="treeRef"
                    class="filter-tree"
                    :data="treeData"
                    :props="defaultProps"
                    show-checkbox
                    node-key="id"
                    :filter-node-method="filterNode"
                  >
                    <template #default="{ node, data }">
                      <div style="display: flex;">
                        <span style="margin-right: 8px">{{ node.label }}</span>
                        <span>
<!--            <a @click="append(data)"> Append </a>-->
                          <!--            <el-link  @click="remove(node, data)"><el-icon><Delete /></el-icon></el-link>-->
          </span>
                        <!--          <IconifyIconOffline :icon="Del" class="relink-btn-icon" />-->
                      </div>
                    </template>
                  </el-tree>
html 复制代码
const filterText = ref("");

const treeRef = ref<InstanceType<typeof ElTree>>();
interface Tree {
  id: number
  label: string
  children?: Tree[]
  checked?: boolean;
}

const defaultProps = {
  children: "children",
  label: "label"
};
const filterNode = (value: string, treeData: Tree) => {
  if (!value) return true;
  return treeData.label.includes(value);
};
const handleSearch = () => {
  treeRef.value!.filter(filterText.value);
}
const handleCheckAll = (value: string) => {
  if (value === 'all') {
    for (let i = 0; i < treeData.value.length; i++) {
      if (treeRef.value.getNode(treeData.value[i]).disabled == false) {
        treeRef.value.setChecked(treeData.value[i].id, true, true);
      }
    }
  } else {
    treeRef.value.setCheckedKeys([])
  }
}
相关推荐
小大宇15 分钟前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
paopaokaka_luck42 分钟前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩1 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper1 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js1 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发
系统集成-鹰翔1 小时前
ERP推单数据库怎么备份:SQLite WAL模式下只复制db文件为什么可能漏任务
javascript·数据库·经验分享·后端
小大宇2 小时前
Vue知识点-ElementPlus-05 输入框
前端·javascript·vue.js
软件技术NINI3 小时前
基于SpringBoot和Vue的摇滚乐鉴赏网站
vue.js·spring boot·后端·spring·html·毕业设计·毕设
外贸GEO优化3 小时前
外贸独立站的可抓取性:JS 渲染、懒加载与无限滚动到底影响什么
开发语言·javascript·ecmascript
web打印社区3 小时前
Lodop在Edge和双核浏览器-先分清内核
前端·javascript·edge·pdf·ecmascript·html5