提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

前言

提示：這里可以添加本文要記錄的大概內(nèi)容：

三級聯(lián)動的方式

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、三級聯(lián)動的方式是什么？

示例：在選擇地區(qū)經(jīng)常使用到的方式

二、使用步驟

1.加載編譯的方式

目錄結(jié)構(gòu)

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{
          // 省市區(qū)級聯(lián)
          options: regionDataPlus,
          selectedOptions: [],
        }
    },
    methods: {
     /**省市區(qū)三級聯(lián)動 */
    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.添加數(shù)據(jù)

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.修改數(shù)據(jù)

getUser(userId).then(response => {
          this.form = response.data;
          //轉(zhuǎn)化區(qū)域碼
          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 = "修改用戶";
        });

總結(jié)

提示：這里對文章進(jìn)行總結(jié)：
例如：以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了pandas的使用，而pandas提供了大量能使我們快速便捷地處理數(shù)據(jù)的函數(shù)和方法。

參考鏈接

三級聯(lián)動的參考鏈接文章來源地址http://www.zghlxwxcb.cn/news/detail-759650.html

到了這里，關(guān)于vue element ui 三級聯(lián)動 設(shè)置 數(shù)據(jù)回顯示問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！