vue element ui 三级联动设置数据回显示问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue element ui 三级联动设置数据回显示问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

三级联动的方式
vue element ui 三级联动设置数据回显示问题,vue.js,javascript,java

提示：以下是本篇文章正文内容，下面案例可供参考

一、三级联动的方式是什么？

示例：在选择地区经常使用到的方式

二、使用步骤

1.加载编译的方式

目录结构

vue element ui 三级联动设置数据回显示问题,vue.js,javascript,java

1. 加载依赖的方式

npm install element-china-area-data -S

2. 引入组件

<template>
   <div style="width:460px;">
     <el-cascader :options="options"
     v-model="selectedOptions" @change="addressChoose"></el-cascader>
   </div>
</template>

<script>
 import {
   provinceAndCityData,
   regionData,
   provinceAndCityDataPlus,
   regionDataPlus,
   CodeToText,
   TextToCode
 } from "element-china-area-data";

  export default {
    name: 'Cselect',
    data(){
        return{
          // 省市区级联
          options: regionDataPlus,
          selectedOptions: [],
        }
    },
    methods: {
     /**省市区三级联动 */
    addressChoose(value) {
      this.$emit('change', value,CodeToText[value[0]],CodeToText[value[1]],CodeToText[value[2]]);
    }
    },
    }
</script>


<style>
</style>

3. 引入

  //父子组建方式
  import threelink from "../user/threeLink/threeLink.vue";

4.添加数据

form表单
  <!-- 父子组建传值方式 -->
        <el-form-item label="住址" prop="address">
          <threelink v-model="form.address" @change="costPlannedAmountChange($event)"></threelink>
        </el-form-item>
form方法
// 父子组建传值的方式
      async costPlannedAmountChange(value) {
        var name = '';
        var spcliAddress = value.map(item => name += CodeToText[item] + '/');
        this.form.arrAddress = spcliAddress;
      },

5.修改数据

getUser(userId).then(response => {
          this.form = response.data;
          //转化区域码
          var addressStr = (this.form.address).substring(14,25);
          var arr=addressStr.split("/");
          var arrCode =TextToCode[arr[0]][arr[1]][arr[2]].code;
          this.form.address = arrCode;
          //debug

          console.log(this.form.address);
          this.open = true;
          this.title = "修改用户";
        });