ant-design-vue中自定义a-tree的打开与折叠图标
ant-design-vue中的价绍真的令人抽象,废话不多说,介绍打开与折叠图标的应用。
<template><a-treev-model="checkedKeys":treeData="treeData"><template slot='switcherIcon'><i @click='rotateWordTree($event)' style='background:black url("../../static/open.png") no-repeat;width:100%;height:100%;background-size: 100% 100%;'/><!-- <a-icon type='dropbox' :selected="selected" aaa="111"/> --></template></a-tree>
</template>
<script>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'},];export default {data() {return {expandedKeys: ['0-0-0', '0-0-1'],autoExpandParent: true,checkedKeys: ['0-0-0'],selectedKeys: [],treeData,};},watch: {checkedKeys(val) {console.log('onCheck', val);},},methods: {rotateWordTree(e){let translateYFront = e.target.style.transform if(translateYFront=='rotate(0deg)' && !translateYFront){e.target.style.transform = 'rotate(90deg)';}else{e.target.style.transform = 'rotate(0deg)';}}},};
</script>
<style scope>
</style>
以上代码是添加自定义打开折叠图标,并且可以实现旋转的效果,因为自定义图标没有旋转效果,所以只能通过点击事件触发。效果图
在内网开发时,通过npm下载指定版本ant-design-vue的包,碰到过没有switcherIcon这个属性,可能包下的有问题.。查看node_module/ant-design-vue/type/tree/tree.ts的文件下是否定义了switcherIcon,没有定义通过不指定版本下载发现可行,应该可以通过修改源码来实现这个错误。
只是一个demo有点丑陋,如果替换图标有其它逻辑,比如事先部分展开,全部展开等,具体问题需要具体分析才行。
这个a-tree有个巨坑就是每次添加slot与slot-scope需要在数据里面添加相应的slots与scopeSlots,这个要求真的巨坑,前端还要遍历数据添加这些字段?或者后端需要专门添加这些字段?坑坑的,目前没发现其它办法。有办法会来继续分享。
ant-design-vue中自定义a-tree的打开与折叠图标相关推荐
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- 解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外 ...
- Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题 在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
- Ant design vue中实现动态更换主题色
一.创建vue项目 可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口 输入文件名 ,文件名最好是英文 然后进行配置功能, 根据需求选择配置功能 这里最好选择2.0版本, 可以 ...
- Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性 树形结构还是没有展开 原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
- ant design vue 表头自定义筛选
这是后端同事给我提的优化...其实搜索里面已经有这一搜索条件了,我不知道为啥还要加一个. 那既然提了,就得想办法实现.然后我找了官方文档. 这是官方网站给的示例及代码: 地址点[这里] 怎么说代码还是 ...
- oracle中showTime用法,ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: 其中,showTime.defaultValue是设置的默认展 ...
- Vue - Ant Design Vue 中 <a-select> 选择器组件,既可从下拉列表选择,又可输入手动输入文本(既可下拉选择又可自己输入)
前言 网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示 既可下拉选 ...
- Ant Design Vue中出现报错: Invalid prop: custom validator check failed for prop “pagination“
一.问题背景 最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个pagination的校验错误警告,这可把我整懵逼了看了一下代码,也没有错撒,而且我之前封装的组件用的好好的,怎么 ...
- ant design vue 中Notification隐藏右上角叉号
this.$notification.open({key: tasksKey,message: 'message',duration: 0,placement: 'topLeft',descripti ...
最新文章
- AngularJS双向数据绑定实例
- vue 删除两个集合中相同的数据_vue.js如何删除数组里面的数据
- 青禾BBS数据库查询语句(动网)
- clickhouse的ReplacingMergeTree引擎实战
- PHP逻辑运算符如何写,PHP 逻辑运算符
- vbreport8.wpf.viewer 个别电脑不显示_手机听歌不过瘾?一招将Win10电脑变成蓝牙音箱...
- 从数据平台到报表开发,我靠这个零代码报表工具,转行后月薪3W
- opencv 滑动条的创建和使用
- php 图片轮换 代码,jQuery实现图片轮播特效代码分享
- JDK11下载和安装(macos)
- 物联网商机发展空间无限、远大于互联网,物联网创业和项目也有坑——物联网避坑指南之1
- Android学生信息管理系统
- 项目实战:Qt贝塞尔曲线拽托顶点实时显示工具
- Oracle索引和事务
- Spring问题研究之bean的属性xml注入List类型不匹配
- java发邮件出现535错误,Java邮件发送的几个常见错误及异常
- PaddlePaddle21天深度学习训练营学习心得
- 比利时研制全息图像电视 可取代现有3D技术
- 软件工程复习重点整理 | 选自《软件工程——理论与实践》
- FISCO-BCOS基于区块链的供应链金融平台开发(1)
热门文章
- 为什么我们的代码难以维护(草稿)
- Mac OS X 背后的故事(二)——Linus Torvalds的短视
- 苹果2021新品发布会,iMac全新设计你GET到了吗
- 设置 IntelliJ IDEA 主题和字体的方法
- 【无标题】VisualStudio2022断点调试
- CUDA学习:Windows下的CUDA环境配置
- 基于知识图谱+机器学习,搭建风控模型的项目落地
- 100多个经典常用的PHP功能插件大全实例演示和下载
- python当前时间加一分钟_Python实现的当前时间多加一天、一小时、一分钟操作示例...
- 寒假线上兼职:300-500元/小时,安利一个大学生也能月入8K的线上兼职!