element 的 el-cascade 组件获取级联选中label和value值

帅气的小伙

已于 2024-01-17 18:30:23 修改

阅读量845

点赞数 9

文章标签： vue.js javascript elementui

于 2024-01-17 18:29:36 首次发布

本文链接：https://blog.csdn.net/goodboxs/article/details/135657645

版权

<template>
  <!--    :props="{ checkStrictly: true }"-->
  <!--  :props="{emitPath:false}"-->
  <el-cascader
    ref="refCascader"
    :placeholder="placeholder"
    :options="options"
    v-model="selections"
    :props="{ checkStrictly: true }"
    clearable
    :size="size"
    :disabled="disabled"
    @change="handleChange"
    filterable></el-cascader>
</template>
<script>

export default {
  props: {
    value: {
      type: [String, Number, Array],
      default: null
    },
    size: {
      type: String,
      default: 'small'
    },
    options: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false
    }
    , placeholder: {
      type: String,
      default: null
    }
  },
  computed: {
    selections: {
      get() {
        return this.value
      },
      set(v) {
        console.log("日志",this.$refs["refCascader"].getCheckedNodes()[0].label)
        this.$emit('input', v[v.length - 1])
      }
    }
  },
  methods:{
    handleChange(a) {
      const areaTextArr = [];
       //此方法获取数据
      const arr = this.$refs["refCascader"].getCheckedNodes()[0].pathNodes;
      arr.forEach((i) => {
        areaTextArr.push(i.label);
      });
      console.log("日志",areaTextArr);
    },
  }
}
</script>