使用vue 城市选择器的 element-china-area-data插件和CodeToText方法来实现省市县三级联动的完整代码

首先需要安装 `element-china-area-data` 插件和 `element-ui` 组件库。

安装命令：

npm install element-china-area-data element-ui --save

然后在需要使用的组件中引入和注册插件：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedOptions"
      @change="handleCascaderChange"
      :props="{ value: 'code', label: 'name', children: 'children' }"
    ></el-cascader>
  </div>
</template>

<script>
import chinaAreaData from 'element-china-area-data';
import 'element-ui/lib/theme-chalk/index.css';
import { Cascader } from 'element-ui';

export default {
  components: {
    [Cascader.name]: Cascader,
  },
  data() {
    return {
      options: chinaAreaData,
      selectedOptions: [],
    };
  },
  methods: {
    handleCascaderChange(selectedOptions) {
      console.log(this.codeToText(selectedOptions));
    },
    codeToText(selectedOptions) {
      const provinceCode = selectedOptions[0];
      const cityCode = selectedOptions[1];
      const districtCode = selectedOptions[2];
      const provinceName = chinaAreaData.find(item => item.code === provinceCode).name;
      const cityData = chinaAreaData.find(item => item.code === provinceCode).children;
      const cityName = cityData.find(item => item.code === cityCode).name;
      const districtData = cityData.find(item => item.code === cityCode).children;
      const districtName = districtData.find(item => item.code === districtCode).name;
      return `${provinceName}-${cityName}-${districtName}`;
    },
  },
};
</script>

`chinaAreaData` 是插件提供的省市县数据，可以直接使用。`options` 是需要传递给 `el-cascader` 组件的数据。`selectedOptions` 绑定了选中的省市县信息。

在 `el-cascader` 中，我们需要设置 `:props` 属性来指定选项中各个字段的名字。`@change` 事件会在选择省市县时触发，可以在方法中处理选中的省市县信息。

`codeToText` 方法将选中的省市县代码转换为对应的名称，并返回字符串类型的省市县信息。

以上是一个使用 `CodeToText` 方法实现的省市县三级联动的代码示例。