ElementUI省市區三級聯動詳解

一、三級聯動組件的介紹

ElementUI省市區三級聯動組件是一種基於Vue框架的UI組件，它通過選擇省份、城市和區縣，實現對應關係的選擇以及頁面數據的呈現和更新。該組件具有良好的用戶體驗、較高的兼容性和可定製性，因此在許多Web開發中被廣泛應用。

二、組件使用方式

1、導入組件：

<template>
  <el-cascader
    :options="options"
    @change="handleChange"
    size="medium"
    filterable
    clearable
    placeholder="請選擇地址">
  </el-cascader>
</template>

<script>
  export default {
    data() {
      return {
        options: []
      };
    },
    mounted() {
      this.options = [{
         value: 'beijing',
         label: '北京市',
         children: [{
           value: 'chaoyang',
           label: '朝陽區',
         }]
      }];
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  }
</script>

2、options：組件選項，選項中的value屬性表示選項的值，label屬性表示選項的顯示名稱，children屬性表示子選項。該屬性可通過後端API獲取數據進行更新。

3、change：組件變化時的回調函數，該函數傳入選中的value值。

4、filterable：是否開啟搜索功能。clearable：是否可清空選擇。

5、大小：通過size屬性可以設置組件的大小，包括medium、small和mini。

6、placeholder：組件的佔位符文本。

三、組件實現原理

1、通過Vue指令將選項列表映射為節點並插入到頁面中。

2、基於點擊事件和回調函數實現對選項的選擇。

3、當選擇省份時，相應的城市節點被映射並插入到頁面中，當選擇城市時，相應的區縣節點被映射並插入到頁面中。原理上就是通過一個固定的數據結構（三層級別）和視圖模板的關係來實現三級聯動的功能。

四、組件的可定製性

1、選項數據可通過後端API動態獲取，實現組件內容的動態更新。

<template>
  <el-cascader
    :options="options"
    :load-data="loadData"
    @change="handleChange"
    size="medium"
    filterable
    clearable
    placeholder="請選擇地址">
  </el-cascader>
</template>

<script>
  export default {
    data() {
      return {
        options: []
      };
    },
    mounted() {
      this.loadData(null, (data) => {
        this.options = data;
      });
    },
    methods: {
      loadData(value, callback) {
        var jsonData = [{
          value: 'beijing',
          label: '北京市',
          children: [{
            value: 'chaoyang',
            label: '朝陽區',
            children: [{
              value: 'wuhuan',
              label: '五環',
              children: []
            }]
          }]
        }];
        if (value) { // 
          jsonData[0].children[0].children[0].children = [{
              value: 'huandao',
              label: '環道',
              children: []
          }];
        }
        callback(jsonData);
      },
      handleChange(value) {
          console.log(value);
      }
    }
  }
</script>

2、通過自定義選項節點，實現定製化的UI效果。

<template>
  <div class="custom-selection">
    <span>您選擇的地址為：</span>
    <el-tag v-if="selectedData[0]" closable @close="handleClose">{{ selectedData[0].label }}</el-tag>
    <el-tag v-if="selectedData[1]" closable @close="handleClose">{{ selectedData[1].label }}</el-tag>
    <el-tag v-if="selectedData[2]" closable @close="handleClose">{{ selectedData[2].label }}</el-tag>
    <el-cascader
      :options="options"
      :props="props"
      @change="handleChange"
      :show-all-levels="false"
      size="small">
    </el-cascader>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        props: {
          expandTrigger: 'hover',
          value: 'value',
          label: 'label',
          children: 'children'
        },
        options: [{
            value: 'beijing',
            label: '北京市',
            children: [{
              value: 'chaoyang',
              label: '朝陽區',
              children: [{
                value: 'wuhuan',
                label: '五環',children: []
              }]
            }]
        }],
        selectedData: []
      };
    },
    methods: {
      handleClose(tag) {
        const label = tag.label;
        const value = tag.value;
        const index = this.selectedData.findIndex(item => {
          return item.value === value;
        });
        this.selectedData.splice(index, 1);
      },
      handleChange(value) {
        const selectedOptions = this.$refs.cascader.getCheckedNodes();
        this.selectedData = selectedOptions.filter(option => {
          return option.children.length === 0;
        });
      }
    }
  };
</script>

五、總結

本文通過對ElementUI省市區三級聯動組件的介紹和使用方式的講解，使讀者了解了該組件的基本結構、使用方法和特性，並深入剖析了它的實現原理和可定製性。由此可見，ElementUI省市區三級聯動組件是一款既實用又靈活的UI組件，可以幫助開發者快速構建Web應用平台的前端交互界面。