element-ui 省市县三级联动

最新推荐文章于 2023-06-25 17:56:30 发布

琨羽

最新推荐文章于 2023-06-25 17:56:30 发布

阅读量647

点赞数 1

分类专栏：前端文章标签： vue.js html5 javascript css

本文链接：https://blog.csdn.net/weixin_44075408/article/details/117425731

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

总结一下省市县三级联动用vue+element-ui实现，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/element.css">
  <script src="js/vue.js"></script>
  <script src="js/element.js"></script>
  <script src="js/axios.js"></script>
  <title>Document</title>
</head>
<body ontouchstart>
  <div id="app">
    <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition" style="margin-left: 5px;">
    
      <el-form-item label="住址">
        <el-cascader placeholder="请选择" v-model="form.value" :options="form.options" :props="{value:'Code',label:'Name',children:'ChildList'}"></el-cascader>
      </el-form-item>
      
  </div>

</body>

<script>
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        form: {
          value:[],
          options: [{
            Name: '',
            Code: '',
            ChildList: [{
              Name: '',
              Code: '',
              ChildList: [{
                Name: '',
                Code: ''
              }]
            }]
          }],
        },
        
      }
    },
    mounted() {
      axios.get('/js/province.json').then(function (response) {
        vm.form.options=response.data
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    },
    
  })
</script>

</html>

需要注意的是里面，props的属性修改，需要与数据相对应，参考下图文档里面
在这里插入图片描述

琨羽

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element-ui 省市县三级联动

总结一下省市县三级联动用vue+element-ui实现，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫

专栏目录