基于若依开发菜单（二）

一、从后台获取数据

        1.首先在created方法中设设置页面初始化启动的方法。

created() {
    //获取城市列表
    this.getCityList();
    //获取岗位模板
    this.getjobname();

    //获取岗位类型
    this.getposttype();
    this.getposttype1();
    //学历工资类别
    this.getedutype();
    //职称等级列表
    this.gettechname();
  },

        2.以下为上面方法的内容

   /** 查询城市列表 */
    getCityList() {
      //loading=true是指刷新页面的转圈圈的特效打开
      this.loading = true;
      listArea().then(response => {
          this.listCity = response.rows;
          this.total = response.total;
          //获取之后关闭转圈圈
          this.loading = false;
        }
      );

    },

       3、 此方法再次调用listArea方法，listArea为area.js中的方法需要import调用js，api文件夹中的area.js文件调用方法如下

import {listArea} from "@/api/area";

        4、此代码为area.js中的文件，该代码的意思是，调用该url指向的路径，并传参

// 查询获取城市名列表
export function listArea(query) {
  return request({
    url: '/system/area/list',
    method: 'get',
    params: query
  })
}

5、getcitylist中response获得后台的返回值，根据后台的返回数据格式，可以分别设置参数接收，

6、v-for中的listCity是指data中的listCity，但是这个框中的值，调用该值时使用this.form.areaid

          <el-form-item label="地区" >
            <el-select v-model="form.areaid" placeholder="请选择地区">
              <el-option
                v-for="city in listCity"
                :label="city.areaname"
                :value="city.id"
                @click.native="getbaseSalaryList(city.id)"

              ></el-option>
            </el-select>

          </el-form-item>

7、数据监听，form中的handler做到了from表单中的所有值的监听，val=this.from

 watch:{
    form:{
      handler:function (val){
        //结果相加
        let diff=val.isdiff
        let jbbt=val.isjbbt
        if (diff==true){
          this.form.diffsalary=300.00;
        }else {
          this.form.diffsalary=0.00;
        };
}，
}