业务需求:左边是正常tree的展示,里面是我们各个板块的内容,右边呢是做一个权限配置。后台数据里面权限配置是分别给了我三个字段,1是勾选0是不勾选。但是这三个的逻辑是要么都不勾选,要么只能勾选其中一个。
于是我根据element ui的文档,参考了tree自定义节点内容的部分,使用 render-content方法来添加右边这块。
<el-tree
ref="tree"
v-loading="loading"
:data="tableData"
show-checkbox
node-key="uuid"
draggable
default-expand-all
:default-checked-keys="defaultCheckKeys"
:props="defaultProps"
:render-content="renderContent"
:expand-on-click-node="false"
:check-on-click-node="false"
:allow-drop="allowDrop"
@check-change="checkChange"
@node-drop="dragDrop"
/>
右边因为有不勾选和三选一状态,我就选择checkbox来实现。
先看看我的错解:
我最开始的思路大概是在每一行的data数据中,我另外新增一个radio字段,它等于1的话是所有权限、2是修改、3是只读、0是啥都不选。
<el-checkbox v-model={data.radio} true-label={1} false-label={0}>所有权限</el-checkbox>
<el-checkbox v-model={data.radio} true-label={2} false-label={0}>修改</el-checkbox>
<el-checkbox v-model={data.radio} true-label={3} false-label={0}>只读</el-checkbox>
但是有一个问题,跑起来之后发现回显成功的几行无法再勾选其他选项,完全动不了,但是最开始没有默认选项的确是正常可用的。后来发现是我在开始如果自己手动声明了data.radio的话就无法正常操作,但是开始不声明,是undefined然后靠选择之后自动声明的就正常。
renderContent(h, { node, data, store }) {
// 选择不同的right之后刷新data
if (data.radio === 1) {
data.rw = 1
data.edit = 0
data.r = 0
} else if (data.radio === 2) {
data.rw = 0
data.edit = 1
data.r = 0
} else if (data.radio === 3) {
data.rw = 0
data.edit = 0
data.r = 1
} else if (data.radio === 0) {
data.rw = 0
data.edit = 0
data.r = 0
}
// 根据data显示选择的right
if (data.rw === 1) {
data.radio = 1
} else if (data.edit === 1) {
data.radio = 2
} else if (data.r === 1) {
data.radio = 3
}
return (
<span class='custom-tree-node'>
<span>{data.label}</span>
<span class='righter'>
<el-checkbox v-model={data.radio} true-label={1} false-label={0}>所有权限</el-checkbox>
<el-checkbox v-model={data.radio} true-label={2} false-label={0}>修改</el-checkbox>
<el-checkbox v-model={data.radio} true-label={3} false-label={0}>只读</el-checkbox>
</span>
</span>)
},
和同事看了半天两脸懵逼,感觉和vue绑定数据监视数据变化的原理可能有关系吧…暂时也不是很明白为什么。后来看到checkbox有个checked元素,于是不再靠提前声明radio来回显,而是使用checked来做回显。修改后满足需求正常运行。
修改后代码:
renderContent(h, { node, data, store }) {
// 选择不同的right之后刷新data
if (data.radio === 1) {
data.rw = 1
data.edit = 0
data.r = 0
} else if (data.radio === 2) {
data.rw = 0
data.edit = 1
data.r = 0
} else if (data.radio === 3) {
data.rw = 0
data.edit = 0
data.r = 1
} else if (data.radio === 0) {
data.rw = 0
data.edit = 0
data.r = 0
}
return (
<span class='custom-tree-node'>
<span>{data.label}</span>
<span class='righter'>
<el-checkbox v-model={data.radio} true-label={1} false-label={0} checked={data.rw === 1}>所有权限</el-checkbox>
<el-checkbox v-model={data.radio} true-label={2} false-label={0} checked={data.edit === 1}>修改</el-checkbox>
<el-checkbox v-model={data.radio} true-label={3} false-label={0} checked={data.r === 1}>只读</el-checkbox>
</span>
</span>)
},
文章浏览阅读4.4k次,点赞2次,收藏16次。写这篇文章的由来是因为后边要用这个工具,但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具,为了方便小伙伴们和童鞋们的后续学习和不打击他们的积极性,因为80%的人都是死在工具的安装这第一道门槛上,这门槛说高也不高说低也不是太低。所以就抽时间水了这一篇文章。_eclipse安装教程
文章浏览阅读4.1w次,点赞12次,收藏193次。小编为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧!1)小米官网项目描述:首先选择小米官网为第一个实战案例,是因为刚开始入门,有个参考点,另外站点比较偏向目前的卡片式设计,实现常见效果。目的为学者练习编写小米官网,熟悉div+css布局。学习资料的话可以加下web前端开发学习裙:600加上610再加上151自己去群里下载下。项目技术:HTML+CSS+Div布局2)迅雷官网项目描述:此站点特效较多,所以通过练习编写次站点,学生可以更多练习CSS3的新特性过渡与动画的实_前端项目实战案例
文章浏览阅读73次。素数,不同的质数,各种各样的问题总是遇到的素数。以下我们来说一下求素数的一种比較有效的算法。就是筛法。由于这个要求得1-n区间的素数仅仅须要O(nloglogn)的时间复杂度。以下来说一下它的思路。思路:如今又1-n的数字。素数嘛就是除了1和本身之外没有其它的约数。所以有约数的都不是素数。我们从2開始往后遍历,是2的倍数的都不是素数。所以我们把他们划掉然后如...
文章浏览阅读532次,点赞9次,收藏14次。探索Keras DCGAN:深度学习中的创新图像生成项目地址:https://gitcode.com/jacobgil/keras-dcgan在数据驱动的时代,图像生成模型已经成为人工智能的一个重要领域。其中,Keras DCGAN 是一个基于 Keras 的实现,用于构建和训练 Deep Convolutional Generative Adversarial Networks(深度卷积生...
文章浏览阅读116次。今天在搭建springcloud项目时,发现如上错误,顺便整理一下这个异常:1. mapper.xml的命名空间(namespace)是否跟mapper的接口路径一致<mapper namespace="com.baicun.springcloudprovider.mapper.SysUserMapper">2.mapper.xml接口名是否和mapper.java接..._spring-could org.apache.ibatis.binding.bindingexception: invalid bound state
文章浏览阅读1.1k次。四种高效数据库设计思想——提高查询效率:设计数据库表结构时,我们首先要按照数据库的三大范式进行建立数据。1. 1NF每列不可拆分2. 2NF确保每个表只做一件事情3. 3NF满足2NF,消除表中的依赖传递。三大范式的出现是在上世纪70年代,由于内存资源比较昂贵,所以严格按照三大范式进行数据库设计。而如今内存变得越来越廉价,在考虑效率和内存的基础上我们可以做出最优选择以达到最高效率。_数据库为什么能提高效率
文章浏览阅读94次。为什么logical==0?_matlab fat
文章浏览阅读302次。一. HTML标签分类1.根据标签个数分类。 单标签:只有一个标签。 <br>, <hr>,<img>,<meta>, 实现一个特定的功能。 双标签:既有开始标签,也有结束标签。 Html,head,Body,title,h1~h6,p,a,ul,li,ol,strong,em。2.根据标签特性分类(网页效果)。 2.1行属性..._ol是单标记还是双标记
文章浏览阅读1.6k次。应用程序在启动和运行的时候往往需要读取一些配置信息,配置基本上伴随着应用程序的整个生命周期,比如:数 据库连接参数、启动参数等。配置主要有以下几个特点:配置是独立于程序的只读变量配置对于程序是只读的,程序通过读取配置来改变自己的行为,但是程序不应该去改变配置配置伴随应用的整个生命周期配置贯穿于应用的整个生命周期,应用在启动时通过读取配置来初始化,在运行时根据配置调整行为。比如:启动时需要读取服务的端口号、系统在运行过程中需要读取定时策略执行定时任务等。配置可以有多种加载方式常见的有程序内部_基于配置是什么意思
文章浏览阅读170次。Glib库实现了一个非常重要的基础类--GObject,这个类中封装了许多我们在定义和实现类时经常用到的机制: 引用计数式的内存管理 对象的构造与析构 通用的属性(Property)机制 Signal的简单使用方式 很多使用GObject..._
文章浏览阅读6.3k次,点赞2次,收藏9次。在 golang 中若写定时脚本,有两种实现。一、基于原生语法组装func DocSyncTaskCronJob() { ticker := time.NewTicker(time.Minute * 5) // 每分钟执行一次 for range ticker.C { ProcTask() }}func ProcTask() { log.Println("hello world")}二、基于 github 中封装的 cron 库实现package taskimport (_golang 定时任务
文章浏览阅读2.1k次。 来源:http://blog.csdn.net/clever101/archive/2008/10/18/3096049.aspx 声明:本文章是我整合网上的资料而成的,其中的大部分文字不是我所为的,我所起的作用只是归纳整理并添加我的一些看法。非常感谢引用到的文字的作者的辛勤劳动,所参考的文献在文章最后我已一一列出。 对关注性能的程序开发人员而言,一个好的计时部件既是益友,也_vc 通过线程和 sleep 获取精准时间