Element UI 自定义省市区三级联动选择组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI 自定义省市区三级联动选择组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一自定义组件代码

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]
  }
}