带你玩转前端vue+element-ui 表单省市区的输入及所传参数

2023-12-12 17:20:37

前言

在前端开发中，我们经常会遇到需要在表单中输入省市区的情况。为了提高用户体验，我们可以使用element-ui的级联组件来实现省市区的级联选择。

使用element-ui级联组件实现省市区级联选择

安装element-ui
在项目中引入element-ui
在表单中添加element-ui级联组件
设置级联组件的属性
获取级联组件的值

安装element-ui

npm install element-ui

在项目中引入element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在表单中添加element-ui级联组件

<el-form-item label="省市区">
  <el-cascader
    v-model="value"
    :options="options"
    @change="handleChange"
  />
</el-form-item>

设置级联组件的属性

// 级联组件的选项
options: [
  {
    value: '110000',
    label: '北京市',
    children: [
      {
        value: '110100',
        label: '东城区'
      },
      {
        value: '110200',
        label: '西城区'
      }
    ]
  },
  {
    value: '120000',
    label: '天津市',
    children: [
      {
        value: '120100',
        label: '和平区'
      },
      {
        value: '120200',
        label: '河东区'
      }
    ]
  }
]

获取级联组件的值

handleChange(value) {
  console.log(value);
}

使用json数据封装成固定形式的数组

const data = [
  {
    value: '110000',
    label: '北京市',
    children: [
      {
        value: '110100',
        label: '东城区'
      },
      {
        value: '110200',
        label: '西城区'
      }
    ]
  },
  {
    value: '120000',
    label: '天津市',
    children: [
      {
        value: '120100',
        label: '和平区'
      },
      {
        value: '120200',
        label: '河东区'
      }
    ]
  }
];