前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >element-plus tree组件使用

element-plus tree组件使用

作者头像
周星星9527
发布于 2021-09-29 07:55:52
发布于 2021-09-29 07:55:52
2.2K00
代码可运行
举报
运行总次数:0
代码可运行

粒子,修改自cascader:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<html>
<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
  <!-- Import component library -->
  <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>
  <body>
    <div id="app">
      <div class="block">
        <span class="demonstration">单选选择任意一级选项</span>
        <el-cascader
          :options="options"
          :props="{ checkStrictly: true }"
          clearable>
        </el-cascader>
        <el-tree
            ref="tree"
            :data="options"
            show-checkbox
            node-key="id"
            default-expand-all
            :props="{ label: 'label' }"
          >
        </el-tree>
      </div>
    </div>
    <script>
    var dist=[
      {value:0,label:'桂林',id:0,parentId:null},
      {value:1,label:'南宁',id:1,parentId:null},
      {value:2,label:'尧山',id:2,parentId:0},
      {value:3,label:'七星',id:2,parentId:0},
      {value:4,label:'西乡塘',id:2,parentId:1},
    ];
    
    const getTreeMenu=(rootList, id, list)=> {
        for (let i = 0; i < rootList.length; i++) {
            let item = rootList[i]
            if (String(item.parentId) == String(id)) {
                list.push(item);
            }
        }
        list.map(item => {
            item.children = []
            getTreeMenu(rootList, item.id, item.children)
            if (item.children.length == 0) {
                delete item.children;
            }
        })
        return list;
    }

    var arr=[];
    getTreeMenu(dist,null,arr);
    console.log(arr);

      const App = {
        data() {
          const state = Vue.reactive({options: arr});
          return {
            ...state,
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
</script>
  </body>
</html>

运行结果

官方粒子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://element-plus.org/zh-CN/component/tree.html#%E8%8A%82%E7%82%B9%E8%BF%87%E6%BB%A4

如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <el-input v-model="filterText" placeholder="Filter keyword" />

  <el-tree
    ref="tree"
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    default-expand-all
    :filter-node-method="filterNode"
  />
</template>

<script lang="ts">
export default {
  data() {
    return {
      filterText: '',
      data: [
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1',
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [
            {
              id: 5,
              label: 'Level two 2-1',
            },
            {
              id: 6,
              label: 'Level two 2-2',
            },
          ],
        },
        {
          id: 3,
          label: 'Level one 3',
          children: [
            {
              id: 7,
              label: 'Level two 3-1',
            },
            {
              id: 8,
              label: 'Level two 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
  },
}
</script>

element plus

1 el-cascader

2 初次使用

3 el-select

4 el-upload

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
因果图模型:理解因果关系的强大工具
在科学研究中,理解变量之间的因果关系至关重要。因果关系帮助我们不仅了解事物之间的关联,还能解释为什么这些关系存在。例如,医生想知道某种药物是否能有效治疗疾病,政策制定者想知道新的教育政策是否能提高学生成绩。因果图模型(Causal Graph Model)为我们提供了一种系统的方法来表示和推理这些因果关系。本文将详细介绍因果图模型的基本概念、组成部分、建立方法、因果推理和实际应用,帮助读者理解和使用这一强大工具。
theskylife
2024/07/31
1.1K0
数据并非都是正态分布:三种常见的统计分布及其应用
你有没有过这样的经历?使用一款减肥app,通过它的图表来监控自己的体重变化,并预测何时能达到理想体重。这款app预测我需要八年时间才能恢复到大学时的体重,这种不切实际的预测是因为应用使用了简单的线性模型来进行体重预测。这个模型将我所有过去的体重数据进行平均处理,然后绘制一条直线预测未来的体重变化。然而,体重减轻通常不会呈线性发展,使用更复杂的数学模型,如泊松回归,可能会更加贴近真实情况。
deephub
2024/06/17
5280
数据并非都是正态分布:三种常见的统计分布及其应用
动态 | 谷歌大脑医疗影像研究新进展,通过视网膜影像预测心脑血管疾病风险
AI 科技评论按:Google Brain 团队近日发现一种使用机器学习来评估心脑血管疾病风险的新方法。这种方法通过分析病人的眼睛影像,能够精确地推断出包括病人年龄、血压、是否吸烟等的相关因素,通过这些因素可以预测病人遭受重大心脑血管疾病的风险——比如心脏病发作。 这种方法与当前最先进的方法相比具有大致相同的准确度,而其优点在于,可以为医生提供快速、便捷的方法来分析病人的心脑血管疾病,并且不需要血液测试。可能更为重要的是,这项工作代表了科学发现的一种新方法。 相关的工作(Prediction of card
AI科技评论
2018/03/06
1K0
动态 | 谷歌大脑医疗影像研究新进展,通过视网膜影像预测心脑血管疾病风险
业界 | 通过分析视网膜图像诊断心脑血管疾病:谷歌大脑团队取得医疗深度学习新进展
选自Google Blog 作者:Lily Peng 机器之心编译 参与:许迪、黄小天 近日,Jeff Dean 在其推特上说:「谷歌大脑团队在机器学习+医疗上再次取得新进展;我们有了令人鼓舞的新发现:非侵入式视网膜图像上含有机器学习模型可以介入的确诊心脑血管疾病的微妙指标,之前医生都不知道有这种迹象。」 心脏病、中风和其他心脑血管疾病一直是人类健康的头号杀手。评估这类风险是未来降低患者罹患心脑血管疾病的关键性第一步。为此,医生要考虑多种风险因子—比如遗传(性别或年龄)、生活习惯(抽不抽烟,血压等)。大部分
机器之心
2018/05/10
8500
揭开因果图模型的神秘面纱:常用的因果图模型
因果图模型(Causal Diagram Models)是一种通过图形化方法表示变量之间因果关系的工具。它在统计学、社会科学、流行病学等研究领域中广泛应用。因果推断(Causal Inference)则是利用这些图模型来确定变量之间的因果关系,而不仅仅是关联关系。本文将介绍几种常见的因果图模型,探讨它们的使用范围、如何使用及其应用场景,并通过图形实例进行说明。
theskylife
2024/08/01
2K0
NLPer,是时候重视因果推理了!这有一份杨笛一等撰写的综述
机器之心报道 编辑:张倩 在这篇综述论文中,来自佐治亚理工学院的杨笛一等十几位研究者系统阐述了自然语言处理中的因果推理。 科学研究的一个基本目标是了解因果关系。然而,尽管因果在生活和社会科学中扮演了重要角色,它在 NLP 中却没有得到同样重要的地位,后者通常更加重视预测任务。随着因果推理和语言处理交叉研究领域的出现,二者之前的界限正变得模糊,但 NLP 中的因果推理研究仍然分散在各个领域,没有统一的定义、基准数据集和对剩余挑战的清晰表述。 在这篇综述论文中,来自以色列理工学院的 Amir Feder、佐治亚
机器之心
2023/03/29
2690
NLPer,是时候重视因果推理了!这有一份杨笛一等撰写的综述
【谷歌AI以眼识心】超越人类医生,从视网膜图像识别心脏病
新智元报道 来源:Google blog、DeepMind 编辑:闻菲、常佩琦、艾霄葆 【新智元导读】谷歌大脑研究人员刚刚在官博上宣布了他们的最新研究成果,使用深度学习分析视网膜图像,以此预测心血管疾病突发的风险。使用深度学习来获得人体解剖学和疾病变化之间的联系,这是人类医生此前完全不知道的诊断和预测方法,不仅能帮助科学家生成更有针对性的假设,还可能代表了科学发现的新方向。 谷歌AI发现了人类医生尚未发现的诊断方法:用深度学习找到视网膜图像与心血管疾病联系 心脏病发作、中风和其他心血管疾病仍是最重要
新智元
2018/03/20
1.4K0
【谷歌AI以眼识心】超越人类医生,从视网膜图像识别心脏病
【聚焦】从李亚鹏谢顶说起, 用大数据谈失败婚姻对人的打击
编者按 王菲的前夫李亚鹏日前被人发现“后脑勺头发稀疏”,有网友点名王菲男友谢霆锋要小心,因为“有一种王菲的前男人叫秃头”,前夫窦唯和李亚鹏都中奖了。 但你们先别急着嘲笑李亚鹏,让大数据告诉你婚姻失败对人打击有多大!稳定的婚姻,对于社会来说无疑是个好事,对于人的身体健康呢? 来源:他们说 早在1858年,法国的流行病学家威廉·法尔就研究过婚姻对健康的影响。他将成年人群分为“已婚”、“单身”和“丧偶”三类。结合死亡率、年龄及其他因素分析后,他发现,单身人群的疾病死亡率是比已婚者高出许多的,而丧偶
小莹莹
2018/04/23
7130
【聚焦】从李亚鹏谢顶说起, 用大数据谈失败婚姻对人的打击
R语言探索BRFSS数据可视化
在本实验中,我们将使用dplyr软件包探索数据,并使用ggplot2软件包对其进行可视化以进行数据可视化
拓端
2020/08/23
7970
新冠病毒侵入人体全过程!从脚趾到大脑,科学家追踪到病毒对身体的巨大摧残
在杜兰大学医学院,肺病和重症监护医生Joshua Denson发现,一天之内,在约20位重症监护病人中,有2名患者出现癫痫症状,其余不少患者出现呼吸衰竭的症状,还有小部分患者的肾脏功能急剧衰减。
大数据文摘
2020/05/19
7250
新冠病毒侵入人体全过程!从脚趾到大脑,科学家追踪到病毒对身体的巨大摧残
知识图谱嵌入与因果推理的结合
知识图谱通过节点(实体)和边(关系)来表示现实世界中的信息,但如何将这些信息转化为可进行推理和决策的形式,仍然是一个挑战。
数字扫地僧
2024/09/22
7680
知识图谱嵌入与因果推理的结合
贝叶斯网络之父Judea Pearl:新因果科学与数据科学、人工智能的思考
本文介绍贝叶斯网络之父 Judea Pearl 《新因果科学与数据科学、人工智能的思考》的报告。
数据派THU
2020/06/28
3640
贝叶斯网络之父Judea Pearl:新因果科学与数据科学、人工智能的思考
中国医疗大数据发布!怎样推翻你身上的“三座大山”?
点击标题下「大数据文摘」可快捷关注 导读:近日德勤咨询发布了《2020年健康医疗预测报告》,其中中国的医疗健康状况大数据让人触目惊心。面对压在中国居民身上的三座“健康大山”,用户究竟该如何翻山越岭,医疗服务究竟该如何颠覆,才可以让我们彻底地成为身体的主人?本文给出了一一解读。 近日,国际知名的咨询公司德勤咨询发布了《2020年健康医疗预测报告》,这其中也反映了中国人群的医疗大数据。 在总人口为13亿多的中国人中,中国高血压人口有1.6~1.7亿人,高血脂的有将1亿多人,糖尿病患者达到9240万人,超重或者
大数据文摘
2018/05/23
7370
药物重定位新框架,人工智能使「旧药新用」研究取得进展
这项工作的目的是加速药物的重新定位。药物重定位并不是一个新的概念,我们现在所熟知的用于减少皱纹出现的肉毒杆菌注射液,最初是被批准用于眼睛的治疗,现也可用于治疗偏头痛。
机器之心
2021/01/20
7560
数据分享|逻辑回归、随机森林、SVM支持向量机预测心脏病风险数据和模型诊断可视化|附代码数据
世界卫生组织估计全世界每年有 1200 万人死于心脏病。在美国和其他发达国家,一半的死亡是由于心血管疾病
拓端
2023/01/11
1.2K0
基于bloomz-7b指令微调的中文医疗问诊大模型,实现智能问诊、医疗问答
本项目开源了基于医疗指令微调的中文医疗问诊模型:明医 (MING)。目前模型的主要功能如下:
汀丶人工智能
2024/02/22
4230
基于bloomz-7b指令微调的中文医疗问诊大模型,实现智能问诊、医疗问答
数据分享|逻辑回归、随机森林、SVM支持向量机预测心脏病风险数据和模型诊断可视化|附代码数据
世界卫生组织估计全世界每年有 1200 万人死于心脏病。在美国和其他发达国家,一半的死亡是由于心血管疾病
拓端
2023/02/09
1.1K0
因果推断入门:为什么需要因果推断?
来源:PaperWeekly本文约13200字,建议阅读15+分钟本文是 Brady Neal 推出的因果推断课程 Introduction to Causal Inference 的中文笔记。 本文是 Brady Neal 推出的因果推断课程 Introduction to Causal Inference 的中文笔记,主要是参考 Lecture Notes 加上一些自己的理解。 课程主页: https://www.bradyneal.com/causal-inference-course Lectur
数据派THU
2022/09/14
2.1K0
因果推断入门:为什么需要因果推断?
Stata中的治疗效果:RA:回归调整、 IPW:逆概率加权、 IPWRA、 AIPW|附代码数据
最近我们被客户要求撰写关于Stata中的治疗效果的研究报告,包括一些图形和统计输出。
拓端
2023/04/20
4850
Nature子刊重磅综述:人脑功能的因果映射
绘制人类大脑功能图谱是神经科学的一个长期目标,它有望为大脑疾病的新治疗方法的开发提供信息。早期的人类大脑功能地图是基于脑损伤或脑刺激导致的功能变化的位置。随着时间的推移,这种方法在很大程度上被功能神经成像等技术所取代,这些技术可以识别出活动与行为或症状相关的大脑区域。尽管这些技术有优势,但它们揭示的是相关性,而不是因果关系。这给解释这些工具产生的数据和使用它们来开发大脑疾病的治疗方法带来了挑战。基于脑损伤和脑刺激的人类脑功能的因果图谱正在进行中。新的方法可以将这些因果信息来源与现代神经成像和电生理学技术相结合,以获得对特定大脑区域的功能的新见解。在这篇综述中,我们为转化研究提供了因果关系的定义,提出了一个连续体来评估人类脑图研究中的因果信息的相对强度,并讨论因果脑图的最新进展及其对发展治疗的相关关系。
悦影科技
2022/11/11
5830
推荐阅读
因果图模型:理解因果关系的强大工具
1.1K0
数据并非都是正态分布:三种常见的统计分布及其应用
5280
动态 | 谷歌大脑医疗影像研究新进展,通过视网膜影像预测心脑血管疾病风险
1K0
业界 | 通过分析视网膜图像诊断心脑血管疾病:谷歌大脑团队取得医疗深度学习新进展
8500
揭开因果图模型的神秘面纱:常用的因果图模型
2K0
NLPer,是时候重视因果推理了!这有一份杨笛一等撰写的综述
2690
【谷歌AI以眼识心】超越人类医生,从视网膜图像识别心脏病
1.4K0
【聚焦】从李亚鹏谢顶说起, 用大数据谈失败婚姻对人的打击
7130
R语言探索BRFSS数据可视化
7970
新冠病毒侵入人体全过程!从脚趾到大脑,科学家追踪到病毒对身体的巨大摧残
7250
知识图谱嵌入与因果推理的结合
7680
贝叶斯网络之父Judea Pearl:新因果科学与数据科学、人工智能的思考
3640
中国医疗大数据发布!怎样推翻你身上的“三座大山”?
7370
药物重定位新框架,人工智能使「旧药新用」研究取得进展
7560
数据分享|逻辑回归、随机森林、SVM支持向量机预测心脏病风险数据和模型诊断可视化|附代码数据
1.2K0
基于bloomz-7b指令微调的中文医疗问诊大模型,实现智能问诊、医疗问答
4230
数据分享|逻辑回归、随机森林、SVM支持向量机预测心脏病风险数据和模型诊断可视化|附代码数据
1.1K0
因果推断入门:为什么需要因果推断?
2.1K0
Stata中的治疗效果:RA:回归调整、 IPW:逆概率加权、 IPWRA、 AIPW|附代码数据
4850
Nature子刊重磅综述:人脑功能的因果映射
5830
相关推荐
因果图模型:理解因果关系的强大工具
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档