首页 > 其他分享 >element-ui级联选择器获取label值

element-ui级联选择器获取label值

时间:2024-02-21 14:13:33浏览次数:25  
标签:resolve pid value label 级联 ui 选择器

element-ui的级联选择器默认获得的是 value 的数值,获取 label 的值需要使用getCheckedNodes这个方法。
我使用级联选择器用于进行地区的选择,如下:

template内:
<el-cascader v-model="regionCodeList" ref="city" placeholder="请选择生产地区" clearable :props="props" @change="handleChange"></el-cascader>

想要从数据库内异步获取每一级的数据,需要使用动态加载,也就是设置懒加载lazy为true,因为我的数据一共就三级,所以高于三级的部分就不再进行方法调用了,props实在data(){}内进行的

props: {
        // 单选
        checkStrictly: true,
        expandTrigger: 'hover',
        getCheckedNodes: 'leafOnly',
        // 懒加载
        lazy: true,
        lazyLoad (node, resolve) {
          let pid = 0 // 默认的 pid 为 0
          if (node.level > 0) { // 如果不是最外层节点
            pid = node.value // 使用当前节点的 value 作为 pid
          }
          if (node.level < 3) {
            // 调用您的 getCityInfo 方法来获取数据
            that.getCityInfo(pid).then((response) => {
              // 将数据转换为级联选择器需要的格式
              const nodes = response.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: item.pid === 1
              }))
              // 通过调用 resolve 将子节点数据返回,通知组件数据加载完成
              resolve(nodes)
            }).catch((error) => {
              console.error('Failed to fetch city info:', error)
              resolve([]) // 在发生错误时,传递空数组给 resolve 函数
            })
          } else {
            resolve([])
          }
        }
      }

具体的获取数据的方法在methods(){}里,同时对数据进行格式化也是在这里

   getCityInfo(pid) { //从服务器获取数据信息
      return cityApi.getCityInfo(pid)
    },

    handleChange(value) {
//获取级联选择器的label数据
      const labels = this.$refs['city'].getCheckedNodes()[0].pathLabels 
对label的数据进行规格化
      const concatenatedLabel = labels.join('')
      this.productForm.proplace = concatenatedLabel
    },

如果不进行规格化,现实的信息是:["河北省", "邯郸市", "丛台区"],进行规格化后是“河北省邯郸市丛台区”,具体要什么效果根据项目的需要进行配置,如果只要你选择的最后一个label,不要前面几级的数据,只用this.$refs['city'].getCheckedNodes()[0].label就行了

   

标签:resolve,pid,value,label,级联,ui,选择器
From: https://www.cnblogs.com/bailichangchuan/p/18025072

相关文章

  • PSD转换UGUI的方案研究(1):介绍
    在UI做好美术界面到程序拼界面这一流程中,美术切图加批注以及程序拼界面都是很占用时间的工作,为此我们想缩短这个时间来节省时间,所以想利用代码去实现这一步骤,借鉴其他的大佬提供的已有的方案上去修改为自己项目中可以用的方案(文末附上参考链接)。介绍项目已接近尾声,我们这套方案......
  • :is :not :has :where 选择器优先级
    idclass:require:nth-of-type:root:hover:focus...[type=text]p::before::placeholder两个字符:::where+,>,~,"",and||:is():not():has()已括号里最大的为准特殊性练习https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#how_is_spe......
  • Studio 3T 2024.1 (macOS, Linux, Windows) - MongoDB 的专业 GUI、IDE 和 客户端,支持
    Studio3T2024.1(macOS,Linux,Windows)-MongoDB的专业GUI、IDE和客户端,支持自然语言查询TheprofessionalGUI,IDEandclientforMongoDB请访问原文链接:Studio3T2024.1(macOS,Linux,Windows)-MongoDB的专业GUI、IDE和客户端,支持自然语言查询,查看最新版......
  • PHPMailer发送邮件报SMTP Error: Could not authenticate.SMTP server error: QUIT co
    在使用PHPMailer开发发送邮件功能时报错SMTPError:Couldnotauthenticate.SMTPservererror:QUITcommandfailed起初这个授权码以为是邮箱登陆密码,填了qq密码验证不通过 以下qq邮箱为例配置授权码下面按步骤操作就可以开通,得到一个授权码  ......
  • quick3 - hackmyvm
    简介难度:简单靶场地址:https://hackmyvm.eu/machines/machine.php?vm=Quick3本地环境虚拟机:vitualbox靶场IP(quick3):192.168.56.105跳板机IP(windows10):192.168.56.1 192.168.190.100渗透机IP(ubuntu22.04):192.168.190.30扫描小型靶场,nmap跑一下全端口即可nmap-p1-655......
  • quick2 - hackmyvm
    简介难度:简单靶场地址:https://hackmyvm.eu/machines/machine.php?vm=Quick2本地环境虚拟机:vitualbox靶场IP(quick2):192.168.56.103跳板机IP(windows10):192.168.56.1 192.168.190.100渗透机IP(ubuntu22.04):192.168.190.30扫描小靶场,用nmap简单扫一下即可:nmap-p1-6553......
  • bs4 css选择器
    数据准备html_doc="""<html><head><title>TheDormouse'sstory</title></head><body><pid="my_p"class="title"><bid="bbb"class="boldest">TheDormou......
  • Hbuilder使用快捷键
    Hbuilder的使用1、Hbuilder基本操作​设置基本外观文字大小,申请账号。​2、Hbuilder快捷键​-新建菜单:ctrl+N​-新建:ctrl+N​-关闭:ctrl+w​-保存:ctrl+s​-激活代码助手:Alt+/​-撤销:Ctrl+Z​-整理代码格式:Ctrl+Shift+F(注意和输入法快捷键冲突)​-......
  • Qt——QLabel控件常见的属性、方法和信号
    QLabel控件常见的属性、方法和信号一、QLabel控件常见属性二、QLabel控件常见方法三、QLabel控件常见信号方法:set+xxx设置属性、去掉set就是获取属性所有控件中的属性和方法都是通用的QLabel控件描述:QLabel是一个用于显示文本或图像的控件。它通常被用作标签或......
  • 好用的UI自动化测试平台推荐
    随着软件行业的不断发展,建立一个完善的自动化测试体系变得至关重要。目前,自动化测试主要涵盖接口自动化测试和UI自动化测试两个主要领域。就目前而言,企业在UI自动化测试方面的覆盖率仍然相对较低。接口自动化测试可以模拟和执行应用程序接口的各种操作,以验证接口的功能、性能和稳......