草庐IT

级联选择器懒加载组件(element-ui级联选择器懒加载数据回显终极解决方案)

机智的赵先生 2023-09-06 原文

lazy-select懒加载选择器组件

由于el-cascader组件的级联选择器采用懒加载方案的情况下数据回显非常复杂，一般需要将回显数据的相关树形结构全部加载，这种情况下一是非常复杂，二是需要调用多次接口造成很大的资源浪费，所以自行二次封装了懒加载的级联选择器组件。
在处理数据回显时，需要接口返回相关的id和name(可根据情况自定义)组成的对象数组即可

git地址：https://github.com/BadMooncc/lazy-select

屏幕录制2023-02-02 13.09.49

安装

使用此组件前请确保安装了element-ui和 vue@2.x。

npm i lazy-select@1.0.2 -S
全局引入
<script>
import lazySelect from 'lazy-select'

Vue.use(lazySelect)
</script>

普通引入

<script>
import lazySelect from 'lazy-select'
export default {
  components: {
    lazySelect
  }
}
</script>

基本用法

<template>
  <lazy-select
    :props="{
      label: 'deptName'
    }"
    lazy
    node-key="id"
    :load="lazyLoad"
    v-model="demo">
  </lazy-select>
</template>
<script>
let id = 1
export default {
  name: 'lazy-select-demo',
  data() {
    return {
      demo: [ { id: 5, deptName: '部门5' }, { id: 2, deptName: '书院2' } ],
    }
  },
  methods: {
    lazyLoad(node, resolve) {
      setTimeout(() => {
        let  arr = []
        arr.push({ id: id, deptName: `部门${id}`, isLeaf: true })
        id += 1
        arr.push({ id: id, deptName: `书院${id}` })
        id += 1
        resolve(arr)
      }, 300);
    },
  }
}
</script>

Attributes

参数说明类型可选值默认值
empty-text内容为空的时候展示的文本String——
node-key每个下拉节点选项用来作为唯一标识的属性String——
props配置选项，具体看下表object——
value(v-model)默认值array——
lazy是否懒加载子节点，需与 load 方法结合使用boolean—false
load加载子树数据的方法，仅当 lazy 属性为true 时生效function(node, resolve)——
indent相邻级节点间的水平缩进，单位为像素number—16
icon-class自定义树节点的图标string——
accordion是否每次只打开一个同级树节点展开boolean—false
check-on-click-node是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。boolean—false

props

参数说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string, function(data, node)——
children指定子树为节点对象的某个属性值string——
disabled指定节点选择框是否禁用为节点对象的某个属性值boolean, function(data, node)——
isLeaf指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效boolean, function(data, node)——
element-ui终极spanclasstokenvue.jsjavascript前端级联选择器懒加载回显

有关级联选择器懒加载组件(element-ui级联选择器懒加载数据回显终极解决方案)的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  6. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  7. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  8. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  9. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  10. ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2

    我的Rails应用程序中安装了carrierwave。但是，当用户上传多页pdf时，我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗？用什么命令？这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

随机推荐