elementui写一个二级联动、用vue写一个二级联动

在开发前端应用时，二级联动是一种常见的需求，特别是在表单中选择省市区、分类等场景。本文将介绍如何使用Element UI和Vue.js实现二级联动功能，并提供多种实现思路。

解决方案概述

本文将通过以下步骤来实现二级联动功能：
1. 使用Element UI的el-cascader组件。
2. 使用Vue的计算属性和监听器。
3. 使用Vuex管理状态。

使用Element UI的el-cascader组件

安装Element UI

首先，确保你已经安装了Element UI。如果还没有安装，可以使用npm进行安装：

bash
npm install element-ui --save


引入Element UI

在你的项目中引入Element UI：

javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';</p>

<p>Vue.use(ElementUI);

实现二级联动

假设我们有一个省份和城市的数据结构如下：

javascript
const provinces = [
{
value: 'zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州'
},
{
value: 'ningbo',
label: '宁波'
}
]
},
{
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京'
},
{
value: 'suzhou',
label: '苏州'
}
]
}
];


在Vue组件中使用el-cascader组件：

html

  <div>
    <el-cascader
      :options="provinces"
      v-model="selectedOptions"
      @change="handleChange"</p>

<blockquote>
  <p>
    </div>
  </p>
</blockquote>


export default {
  data() {
    return {
      provinces: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州'
            },
            {
              value: 'ningbo',
              label: '宁波'
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京'
            },
            {
              value: 'suzhou',
              label: '苏州'
            }
          ]
        }
      ],
      selectedOptions: []
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};


<p>

使用Vue的计算属性和监听器

数据结构

假设我们有两个数组，分别存储省份和城市的数据：

javascript
const provinces = [
  { value: 'zhejiang', label: '浙江' },
  { value: 'jiangsu', label: '江苏' }
];</p>

<p>const cities = {
  zhejiang: [
    { value: 'hangzhou', label: '杭州' },
    { value: 'ningbo', label: '宁波' }
  ],
  jiangsu: [
    { value: 'nanjing', label: '南京' },
    { value: 'suzhou', label: '苏州' }
  ]
};

实现二级联动

在Vue组件中使用计算属性和监听器：

html

  <div>
    
      <el-option
        v-for="province in provinces"
        :key="province.value"
        :label="province.label"
        :value="province.value"</p>

<blockquote>
  <p>
      
      
        <el-option
          v-for="city in filteredCities"
          :key="city.value"
          :label="city.label"
          :value="city.value"
  
      
    </div>
  </p>
</blockquote>


export default {
  data() {
    return {
      provinces: [
        { value: 'zhejiang', label: '浙江' },
        { value: 'jiangsu', label: '江苏' }
      ],
      cities: {
        zhejiang: [
          { value: 'hangzhou', label: '杭州' },
          { value: 'ningbo', label: '宁波' }
        ],
        jiangsu: [
          { value: 'nanjing', label: '南京' },
          { value: 'suzhou', label: '苏州' }
        ]
      },
      selectedProvince: '',
      selectedCity: ''
    };
  },
  computed: {
    filteredCities() {
      return this.cities[this.selectedProvince] || [];
    }
  },
  watch: {
    selectedProvince(newVal) {
      this.selectedCity = '';
    }
  }
};


<p>

使用Vuex管理状态

安装Vuex

首先，确保你已经安装了Vuex。如果还没有安装，可以使用npm进行安装：

bash
npm install vuex --save


创建Vuex store

在src/store/index.js中创建Vuex store：

javascript
import Vue from 'vue';
import Vuex from 'vuex';</p>

<p>Vue.use(Vuex);</p>

<p>export default new Vuex.Store({
  state: {
    provinces: [
      { value: 'zhejiang', label: '浙江' },
      { value: 'jiangsu', label: '江苏' }
    ],
    cities: {
      zhejiang: [
        { value: 'hangzhou', label: '杭州' },
        { value: 'ningbo', label: '宁波' }
      ],
      jiangsu: [
        { value: 'nanjing', label: '南京' },
        { value: 'suzhou', label: '苏州' }
      ]
    },
    selectedProvince: '',
    selectedCity: ''
  },
  mutations: {
    setSelectedProvince(state, province) {
      state.selectedProvince = province;
      state.selectedCity = '';
    },
    setSelectedCity(state, city) {
      state.selectedCity = city;
    }
  },
  getters: {
    filteredCities: state => {
      return state.cities[state.selectedProvince] || [];
    }
  }
});

在组件中使用Vuex

在Vue组件中使用Vuex：

html

  <div>
    
      <el-option
        v-for="province in provinces"
        :key="province.value"
        :label="province.label"
        :value="province.value"</p>

<blockquote>
  <p>
      
      
        <el-option
          v-for="city in filteredCities"
          :key="city.value"
          :label="city.label"
          :value="city.value"
  
      
    </div>
  </p>
</blockquote>


import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['provinces', 'selectedProvince', 'selectedCity']),
    ...mapGetters(['filteredCities'])
  },
  methods: {
    ...mapMutations(['setSelectedProvince', 'setSelectedCity'])
  },
  watch: {
    selectedProvince(newVal) {
      this.setSelectedProvince(newVal);
    },
    selectedCity(newVal) {
      this.setSelectedCity(newVal);
    }
  }
};


<p>

以上是三种实现二级联动的方法，你可以根据项目的具体需求选择合适的方式。希望本文对你有所帮助！