用vue，Element-UI，Axios實現簡單的三級聯動

摘要： 安裝並使用Element-UI： 安裝： npm i element-ui -S 引入 Element: 完整引入 - 在 main.js 中寫入以下內容： ...

安裝並使用Element-UI：

1. 安裝：

npm i element-ui -S

2. 引入 Element:

   完整引入 - 在 main.js 中寫入以下內容：

   import Vue from 'vue';
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   import App from './App.vue';
   
   Vue.use(ElementUI);
   
   new Vue({
   el: '#app',
   render: h => h(App)
   });

3. 基本步驟都已經ok,下面我們開始寫前端介面程式碼:

   select.png

   上element-ui官網，找到選擇器select這裡我們就不多說了，複製貼上，寫css樣式就行了。貼上完修改完之後的樣子就是這個樣子了，selent框.png

4. 使用：

   首先我們選擇之後資料才會發生改變，所以要給select繫結change事件。

vue中的應用：

//裡面各項值，請參考Element-UI
<div>
<el-select v-model="value" placeholder="請選擇省" class="sheng" @change="top">//這個change事件是select的，不是option的，別寫在option裡面
<el-option
v-for="item in sheng"
:key="item.area_id"
:label="item.area_name"
:value="item.area_id">
</el-option>
</el-select>
<br>
<el-select v-model="value1" placeholder="請選擇市" class="shi" @change="content">
<el-option
v-for="item in shi.city_list"
:key="item.area_id"
:label="item.area_name"
:value="item.area_id">
</el-option>
</el-select>
<el-select v-model="value2" placeholder="請選擇區" class="qu">
<el-option
v-for="item in qu.county_list"
:key="item.area_id"
:label="item.area_name"
:value="item.area_id">
</el-option>
</el-select>
</div>

3. 這個時候可以使用json資料，並找到json資料裡的資料特點；當然也可以使用介面

npm i axios -D

import Axios from 'axios'
export default {
data() {
return {
sheng: [],
value: '',
shi: [],
value1: '',
qu: [],
value2: '',
}
},
methods: {
top() {
this.shi = this.sanji.filter(item => item.area_id=== this.value )[0]
this.value1 = ''
this.value2 = ''
},
content() {
this.qu= this.shi.city_list.filter(item => item.area_id === this.value1 )[0]
},
},
created() {
Axios.get(`http://m.xyucd.com:7000/address-list`).then(res => {
let {data} = res.data
this.sheng = data
})
}