VUE实现民族下拉选择

VUE+ELEMENT-UI实现民族下拉选择

1. 创建子组件：nation-select.vue

<template>
  <el-select
    v-model="nationvalue"
    filterable
    placeholder="请选择民族"
    class="add-nation-input"
    @change="nationChange"
  >
    <el-option
      v-for="item in nationList"
      :key="item.value"
      :label="item.info"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'NationSelect',
    data() {
      return {
        nationvalue: '',
        nationList: [
          {
            id: 1,
            info: '汉族',
            value: '汉族'
          },
          {
            id: 2,
            info: '壮族',
            value: '壮族'
          },
          {
            id: 3,
            info: '满族',
            value: '满族'
          },
          {
            id: 4,
            info: '回族',
            value: '回族'
          },
          {
            id: 5,
            info: '苗族',
            value: '苗族'
          },
          {
            id: 6,
            info: '维吾尔族',
            value: '维吾尔族'
          },
          {
            id: 7,
            info: '土家族',
            value: '土家族'
          },
          {
            id: 8,
            info: '彝族',
            value: '彝族'
          },
          {
            id: 9,
            info: '蒙古族',
            value: 9
          },
          {
            id: 10,
            info: '藏族',
            value: '藏族'
          },
          {
            id: 11,
            info: '布依族',
            value: '布依族'
          },
          {
            id: 12,
            info: '侗族',
            value: '侗族'
          },
          {
            id: 13,
            info: '瑶族',
            value: '瑶族'
          },
          {
            id: 14,
            info: '朝鲜族',
            value: '朝鲜族'
          },
          {
            id: 15,
            info: '白族',
            value: '白族'
          },
          {
            id: 16,
            info: '哈尼族',
            value: '哈尼族'
          },
          {
            id: 17,
            info: '哈萨克族',
            value: '哈萨克族'
          },
          {
            id: 18,
            info: '黎族',
            value: '黎族'
          },
          {
            id: 19,
            info: '傣族',
            value: '傣族'
          },
          {
            id: 20,
            info: '畲族',
            value: '畲族'
          },
          {
            id: 21,
            info: '傈僳族',
            value: '傈僳族'
          },
          {
            id: 22,
            info: '仡佬族',
            value: '仡佬族'
          },
          {
            id: 23,
            info: '东乡族',
            value: '东乡族'
          },
          {
            id: 24,
            info: '高山族',
            value: '高山族'
          },
          {
            id: 25,
            info: '拉祜族',
            value: '拉祜族'
          },
          {
            id: 26,
            info: '水族',
            value: '水族'
          },
          {
            id: 27,
            info: '佤族',
            value: '佤族'
          },
          {
            id: 28,
            info: '纳西族',
            value: '纳西族'
          },
          {
            id: 29,
            info: '羌族',
            value: '羌族'
          },
          {
            id: 30,
            info: '土族',
            value: '土族'
          },
          {
            id: 31,
            info: '仫佬族',
            value: '仫佬族'
          },
          {
            id: 32,
            info: '锡伯族',
            value: '锡伯族'
          },
          {
            id: 33,
            info: '柯尔克孜族',
            value: '柯尔克孜族'
          },
          {
            id: 34,
            info: '达斡尔族',
            value: '达斡尔族'
          },
          {
            id: 35,
            info: '景颇族',
            value: '景颇族'
          },
          {
            id: 36,
            info: '毛南族',
            value: '毛南族'
          },
          {
            id: 37,
            info: '撒拉族',
            value: '撒拉族'
          },
          {
            id: 38,
            info: '布朗族',
            value: '布朗族'
          },
          {
            id: 39,
            info: '塔吉克族',
            value: '塔吉克族'
          },
          {
            id: 40,
            info: '阿昌族',
            value: '阿昌族'
          },
          {
            id: 41,
            info: '普米族',
            value: '普米族'
          },
          {
            id: 42,
            info: '鄂温克族',
            value: '鄂温克族'
          },
          {
            id: 43,
            info: '怒族',
            value: '怒族'
          },
          {
            id: 44,
            info: '京族',
            value: '京族'
          },
          {
            id: 45,
            info: '基诺族',
            value: '基诺族'
          },
          {
            id: 46,
            info: '德昂族',
            value: '德昂族'
          },
          {
            id: 47,
            info: '保安族',
            value: '保安族'
          },
          {
            id: 48,
            info: '俄罗斯族',
            value: '俄罗斯族'
          },
          {
            id: 49,
            info: '裕固族',
            value: '裕固族'
          },
          {
            id: 50,
            info: '乌孜别克族',
            value: '乌孜别克族'
          },
          {
            id: 51,
            info: '门巴族',
            value: '门巴族'
          },
          {
            id: 52,
            info: '鄂伦春族',
            value: '鄂伦春族'
          },
          {
            id: 53,
            info: '独龙族',
            value: '独龙族'
          },
          {
            id: 54,
            info: '塔塔尔族',
            value: '塔塔尔族'
          },
          {
            id: 55,
            info: '赫哲族',
            value: '赫哲族'
          },
          {
            id: 56,
            info: '珞巴族',
            value: '珞巴族'
          }
        ]
      };
    },
    props: ['nationV'],
    methods: {
      nationChange() {
        this.$emit('nationvalue', this.nationvalue);
      }
    },
    watch: {
      nationV: {
        handler(newValue) {
          if (newValue !== undefined) {
            this.nationvalue = newValue;
          }
        },
        immediate: true
      }
    }
  };
</script>

这样数据库保存的值和显示的值是一样的。

2. 在需要的组件中引入使用

import NationSelect from "路径/nation-select";

3.在需要的from表单中使用

<nation-select :nationV='addForm.nation' @nationvalue='nationvalueChange'></nation-select>

4.实现每次选择改变值，接收选择后的值

//接收民族改变值
    nationvalueChange(data) {
      this.addForm.nation = data;
    },