Element UI 自定义省市区三级联动选择组件

最新推荐文章于 2025-02-06 10:57:53 发布

chengqiuming

最新推荐文章于 2025-02-06 10:57:53 发布

阅读量2.2k

点赞数 1

分类专栏： Vue 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/chengqiuming/article/details/129049821

版权

Vue 专栏收录该内容

161 篇文章

订阅专栏

一自定义组件代码

1 文件存放位置

2 代码

<template>
  <div>
    <el-cascader
      ref="cas"
      expand-trigger="hover"
      style="width: 100%;"
      :options="options"
      v-model="value1"
      @change="handleChange"
      filterable
      :props="{value:'label'}"
      placeholder="省/市/区"
    ></el-cascader>
  </div>
</template>

<script>
  export default {
    name: 'regionCascader',
    props: ['value'],
    data () {
      return {
        options: [],
        selectedOptions: []
      }
    },
    computed: {
      value1: {
        set (val) {
          this.$emit('input', val)
        },
        get (val) {
          return this.value
        }
      }
    },
    mounted () {
      let page = this
      page.getNode()
    },
    methods: {
      handleChange (value) {
        this.$emit('provincesValueChang', this.$refs.cas.getCheckedNodes()[0].pathLabels)
      },

      getNode () {
        this.$http({
          url: `/base/division/pcd`,
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            // eslint-disable-next-line no-useless-escape
            this.options = JSON.parse(JSON.stringify(data.options).replace(/\"children"\:\[]/g, '"no":0'))
          }
        })
      }
    }
  }
</script>

二 main.js 代码

import RegionCascader from './components/regionCascader'
Vue.use(RegionCascader)
Vue.component('regionCascader', RegionCascader)

三使用方法

1 结构部分

<!-- 自定义省/市/区级联选择控件的使用 -->
<el-form-item label="省/市/区">
  <regionCascader
    @provincesValueChang="provincesValueChang"
    :value="region"
    @update:value="region=$event"
    style="width: 100%;"
  ></regionCascader>
</el-form-item>

<!-- 显示选择的省/市/区 -->
<el-form-item label="所在省" prop="province">
  <el-input v-model="dataForm.province" :disabled="disabled" placeholder="所在省"></el-input>
</el-form-item>
<el-form-item label="所在市" prop="city">
  <el-input v-model="dataForm.city" :disabled="disabled" placeholder="所在市"></el-input>
</el-form-item>
<el-form-item label="所在区县" prop="district">
  <el-input v-model="dataForm.district" :disabled="disabled" placeholder="所在区县"></el-input>
</el-form-item>

2 js 数据部分

data () {
  return {
    region: '', // 自定义省/市/区级联选择控件用此数据
    visible: false,
    dataForm: {
      ......
      province: '', // 省
      city: '', // 市
      district: '', // 区
    },
    dataRule: {
      name: [
        {required: true, message: '名称不能为空', trigger: 'blur'}
      ]
    }
  }
},

3 js 方法部分

methods: {
  // 省市区选择处理
  provincesValueChang (value) {
    this.dataForm.province = value[0]
    this.dataForm.city = value[1]
    this.dataForm.district = value[2]
  }
}