ElementUI Cascader选中label值获取方法
taotaoit Vue 2025-07-07 22 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

8291254 2698 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (260)
Mysql (59)
DedeCms (33)
jQuery (74)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

ElementUI Cascader选中label值获取方法

使用 props + ref(动态获取)
如果需要主动获取(如通过按钮触发),可通过 ref 访问组件内部方法:
<template>
  <div>
    <el-cascader
      ref="myCascader"
      v-model="selectedValue"
      :options="options"
      :props="{ checkStrictly: true }" <!-- 启用严格模式可选择任意级 -->
    ></el-cascader>
    
    <button @click="getLabel">获取Label</button>
    <div>选中的标签:{{ selectedLabel }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
      selectedLabel: "",
      options: [           // 示例数据
        {
          value: 'beijing',
          label: '北京',
          children: [
            { value: 'chaoyang', label: '朝阳区' },
            { value: 'haidian', label: '海淀区' }
          ]
        }
      ]
    };
  },
  methods: {
    getLabel() {
      const cascader = this.$refs.myCascader;
      // 获取当前选中节点的数组
      const nodes = cascader.getCheckedNodes();
      if (nodes.length > 0) {
        // 获取第一个选中节点的路径label
        this.selectedLabel = nodes[0].pathLabels.join(' / ');
      }
    }
  }
};
</script>

版权声明:本站原创文章,允许自由转载。

相关推荐
接口返回request failed with status code 500错误
Vue | 2023-02-20 3643
接口返回request failed with status code 500错误 登录界面,验证账号密码成功,但是返回500错误 可能原因:linux服务器,用tp5搭建的后台及接口,会生成一部分缓存文件,但是linux默认没有权限创建数据,所以,只要在缓存文件夹runtime添加写的权限即可
解决errors and 0 warnings potentially fixable with the `--fix` option.问题
Vue | 2023-06-08 3015
解决errors and 0 warnings potentially fixable with the `--fix` option.问题 项目正常运行,就是有这个提示 找到.eslintrc.js注释掉// 'eslint:recommended'
评论:0条
评论加载中...
发表评论