vue使用ant design vue 树型控件(tree)

news/2024/7/11 1:04:36 标签: vue.js, javascript, es6

遇到的需求就是一级结构不要checked框,二级结构也不要,三级结构才需要,那么需要怎么做呢,因为人家给的结构是这样子的
checkable这个是一定要加的,要不不会显示出来

 <a-tree
   v-model="checkedKeys"
   checkable
   :expanded-keys="expandedKeys"
   :auto-expand-parent="autoExpandParent"
   :selected-keys="selectedKeys"
   :tree-data="treeData"
   @expand="onExpand"
   @select="onSelect"
 />
// 人家组件给的结构是这样子的,组件的结构
const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];
// 当你从后端拿到数据的时候,你需要组装数据,如果后端给你的数据是这个结构那就不需要了,不是的话你就得自己组装数据
res.result.forEach(ywItem => {
  ywArr.push({
  // checkable就是你需要在哪个结构显示你需要的显示的checked框。
  // html里面写的是全部都显示,所以在这儿把checkable写为false就不显示,不写就为显示
    checkable: false,
    title: ywItem.ywmc,
    key: ywItem.id,
    children: xmArr
  });
});

http://www.niftyadmin.cn/n/763862.html

相关文章

federation机制的最新发布_基于Federation实现Kubernetes跨集群应用调度实践

1 Kubernetes Federation介绍1.1 Kubenetes Federation概述Kubernetes Federation实现在混合云模式下统一管理多个跨region或者跨公有云供应商的Kubernetes集群&#xff0c;使Kubernetes应用支持在多个跨区域集群之间部署、调度以及同步&#xff0c;从而实现应用的高可用以及灾…

pythoncookie自动登录_Python使用cookie 免密登录了解一下

我们都知道 HTTP 是无状态的&#xff0c;用户每次打开 web 页面时&#xff0c;服务器都打开新的会话&#xff0c;而且服务器也不会自动维护客户的上下文信息&#xff0c;那么服务器是怎么识别用户的呢&#xff1f;这就是本文今天要讲解的内容。当服务端需要记录用户的状态时&am…

ant design vue(upload)上传文件不显示删除按钮

有一种办法是直接给a-upload加disbale <a-upload// 加这句代码就行了:disabled"(title 查看) || (status A)"// 还可以加这个 这个是组件自带:showUploadList{{showRemoveIcon:false}}:action"getUploadAction()"list-type"picture":header…

ant design vue 使用树形控件(tree)点击节点expand判断的方法

当你想使用这个组件的时候&#xff0c;但是你点击一级树的时候调用一个接口&#xff0c;点击二级树的时候在调用另一个接口&#xff0c;那你就需要在点击一级节点的时候不用调用二级节点。那需要怎么做的&#xff0c;说一下我的思路&#xff0c;如果大家有别的更简单的方法&…

windows7怎么安装python库_Windows7下python的scipy库的安装-阿里云开发者社区

最近写了一篇关于“微软开源分布式高性能GB框架LightGBM安装使用”的文章&#xff0c;有小伙伴安装python环境遇到了问题。我个人也尝试安装了一下&#xff0c;确实遇到了很多问题。 scipy库的安装 1、执行命令&#xff1a;pip install scipy 可能会提示类似下面的信息&#xf…

vue 搜索文本让搜索的字体高亮显示

首先用到了ant design vue的折叠板&#xff0c;replace方法&#xff08;replace() 方法用于在字符串中用一些字符替换另一些字符&#xff0c;或替换一个与正则表达式匹配的子串。&#xff09; 这个折叠组件的hander支持字符串写法&#xff0c;支持solt写法。现在用的是solt写法…

用python的五种方式_Python 操作 MySQL 的5种方式(转)

不管你是做数据分析&#xff0c;还是网络爬虫&#xff0c;Web 开发、亦或是机器学习&#xff0c;你都离不开要和数据库打交道&#xff0c;而 MySQL 又是最流行的一种数据库&#xff0c;这篇文章介绍 Python 操作 MySQL 的5种方式&#xff0c;你可以在实际开发过程中根据实际情况…