element级联选择器数据渲染

el-cascader

       <el-cascader
          class="filter-item"
          placeholder="请选择所属部门"
          :options="departmentData"
          v-model="departmentid"
          clearable
          :props="props"
          style="width: 200px;"
          change-on-select
          @change="handleChange"
        ></el-cascader>

data

 	  props: {
        value: "id",//id为接口参数
        label: "title",
        children: "children"
      },
      departmentData: [],
      departmentid: [],

methods

    handleChange(value) {
      this.departmentid = value;
      this.listQuery.dep_id = value[value.length - 1];
    },
    getDepartment() {
    //调用接口
      get_department()
        .then(rs => {
        //数据结构 https://element.eleme.cn/#/zh-CN/component/cascader
          this.departmentData = rs.data;
        })
        .catch(err => {});
    }

你可能感兴趣的:(vue)