vue+element級聯選擇器對接后台數據

1.后台接口返回的數據肯定要和級聯選擇器的數據一致,所以我專門弄個model存放返回的值，如下：/** * @Auther: GGDong

 * @Date: 2019/4/3 10:30
 */
@Getter
@Setter
public class ServerList{
 //值
 private String value;

 //名稱
 private String label;

　　//子級
 private List<ServerList> children;
}

2.最主要的就是寫sql了，不過幸好有MyBatis有個注解提供給我們使用，方便了許多，如下

@Select("SELECT area_code AS code,area_address AS name FROM hs_region WHERE parent_code = '0'")
@Results({
@Result(column = "code",property = "code"),
@Result(column = "code", property = "sub", many = @Many(select = "findListByPid"))
})
List<RegionList> findRegionList();

@Select("SELECT area_code AS code,area_address AS name FROM hs_region WHERE parent_code = #{area_code}")
List<RegionList> findListByPid(@Param("area_code") String areaCode);

3.級聯選擇器樣式代碼：

<el-form-item label="區/服" prop="regionServers">
  <div class="block">
    <el-cascader
      :options="regionServerList"
      v-model="ruleForm.regionServers"
      @change="handleChange">
    </el-cascader>
  </div>
</el-form-item>
4.如果涉及到回顯的話，返回的值對應的是value才行,如下：

this.ruleForm.regionServers = [data.region, data.server]