服务器之家

服务器之家 > 正文

vue Treeselect下拉树只能选择第N级元素实现代码

时间:2021-09-06 17:46     来源/作者:豆子麻麻

今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档

https://vue-treeselect.js.org/#disable-item-selection

vue Treeselect下拉树只能选择第N级元素实现代码

然后看到isDisabled属性可以禁止选择,具体实现代码如下:

  1. <treeselect
  2. :disable-branch-nodes="true"
  3. :normalizer="normalizer"
  4. v-model="formData.goodsTypeId"
  5. :multiple="false"
  6. :options="goodsType"
  7. placeholder='请选择'>
  8. <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName,
  9. countClassName }">
  10. {{ node.label }}
  11. </label>
  12. </treeselect>

如何给数据添加isDisabled属性呢?

自己尝试着在下拉树配置中添加了一下,竟然成功了

【提示】node这个对象包含的字段打印了一下,(这些数据是后台接口提供的)如下图展示:

vue Treeselect下拉树只能选择第N级元素实现代码

【isLeaf】Y是叶子节点,N是分支节点【typeLevel】第?级

  1. normalizer(node) {
  2. //去掉children=[]的children属性
  3. if(node.children && !node.children.length) {
  4. delete node.children;
  5. }
  6. if(node.isLeaf=='Y' && node.typeLevel!=3){
  7. node['isDisabled'] = true;
  8. }
  9. return {
  10. id: node.typeId,
  11. label: node.typeName,
  12. children: node.children,
  13. }
  14. },

vue Treeselect下拉树只能选择第N级元素实现代码

补充知识:Vue ElementUI使用el-tree,只容许叶子结点有多选框

在使用el-tree时,我们需要多选功能会在el-tree标签添加show-checkbox属性:

vue Treeselect下拉树只能选择第N级元素实现代码

那么,有时会遇到这样的需求,父节点不让多选,只容许多选叶子结点。那么,这时我们改怎么做呢?

通过调试工具:

vue Treeselect下拉树只能选择第N级元素实现代码

多选框就是.el-checkbox这个样式,那么我们只需把这个样式覆盖一下,把它隐藏掉:

  1. /deep/ .el-tree-node{
  2. .is-leaf + .el-checkbox .el-checkbox__inner{
  3. display: inline-block;
  4. }
  5. .el-checkbox .el-checkbox__inner{
  6. display: none;
  7. }
  8. }

注意:/deep/ 是强穿透,也可以写成<<< ,只在当前组件文件起作用,不改变整个页面样式。

最后别忘了在el-tree组件加上 :check-strictly="true" 是否严格的遵循父子不互相关联的做法

以上这篇vue Treeselect下拉树只能选择第N级元素实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

原文链接:https://blog.csdn.net/weixin_42414668/article/details/88975093

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部