使用element表单级联cascader动态加载省市区

效果图

第一步：表单初始化

这里面的template是使用了自定义

<avue-form :option="dialogFormOption" v-model="dialogForm"  ref="dialogForm">
        <template slot="position" slot-scope="{row}">
          <el-cascader
            v-model="el_value"
            :props="props"
            :options="provenceArray"
          ></el-cascader>
        </template>
      </avue-form>

这是这个表单里面的option，那个给区域设置的slot:true，就是给这个字段自定义样式

dialogFormOption:{
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label:'区域选择',
            prop: 'position',
            slot: true,
            span:24,
          },{
            label:'项目名称',
            prop: 'title',
            span:24
          },
          {
            label:'项目代码',
            prop: 'title',
            span:24
          },
          {
            label:'说明',
            prop: 'title',
            type:'textarea',
            span:24
          }]
      },

分析代码

这是element自带的级联选择器，我们给他这几个属性，option就是展示出来的数组，比如省就是有很多省，所以就是一个数组，记得在return里面定义一下

<el-cascader
            v-model="el_value"
            :props="props"
            :options="provenceArray"
          ></el-cascader>

props的含义

首先我们肯定都知道props是父传子的意思，而我们调取后台接口拿到的数据的时候可以看到，名字都是title，所以从这里拿到的值渲染在这个级联上面，如果你没有改props里面的title是显示不出来的，或者说是显示出来的一片空白，label要等于我们拿到的数据的名字，如果后台给你的子级的名字是children那就是在props里填children，如果不是就用后端传过来的名字

掉接口

最后在这里调取后台给你的接口拿到数据，并且把刚才设置的那个展示出来的数组赋值上去，就会自动渲染了