级联选择器el-cascader根据下拉数据的id获取所对应的文字

参考文章：vue中el-cascader根据下拉数据的id获取所对应的文字

问题：项目中需求就是根据选择对应的省市区把省市区的文字传递过去，并把中将的‘，’去掉，正常情况下都是要传id的，既然需求来了， 那就慢慢调试，话不多上代码。

效果图：

代码：

<template>
  <div>
    <div class="block">
      <el-cascader v-model="value" :options="options" ref="tree"></el-cascader>
      <button @click="getData">获取节点下的汉字</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    getData() {
      // 获取节点下的汉字
      let arr = [];
      let data = this.$refs.tree.getCheckedNodes()[0].pathLabels.toString();
      arr = data.split(",");
      console.log(" ~ file: Index.vue:67 ~ getData ~ arr:", arr);
    },
  },
};
</script>

<style>
</style>