el-cascader 使用笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30272167/article/details/143831574

1.效果

在这里插入图片描述

2.官网

https://element.eleme.cn/#/zh-CN/component/cascader

3.动态加载（官网）

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

在这里插入图片描述

4.使用实例

（1）页面

<el-form-item label="行政区划" prop="divisionCode">
  <el-cascader :props="props" v-model="form.divisionCode" style="width: 100%;"></el-cascader>
</el-form-item>

<script>
  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            let value=node.value==undefined?"":node.value;
            findAll(value).then(res=>{
              const nodes=res.data;
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            })
          }
        },
      };
    }
  };
</script>

（2）后端

/**
 * 查询行政区划列表
 */
@GetMapping("/findAll")
public AjaxResult findAll(@RequestParam("code") String code) {
    List<DivisionVo> list = tDivisionService.selectDivisionList(code);
    return AjaxResult.success(list);
}

@Data
public class DivisionVo {

    @Schema(description = "区划编码")
    private String value;

    @Schema(description = "区划名称")
    private String label;

    @Schema(description = "是否有下级：false=有，true=没有")
    private Boolean leaf;
}

<select id="selectDivisionList" resultType="com.ruoyi.expertveteran.vo.DivisionVo">
    SELECT
        `code` VALUE,
        short_name label,
        leaf
    FROM
        t_division
    WHERE
        <if test="code!=null and code!=''">
            parent_code =#{code}
        </if>
        <if test="code==null or code==''">
            parent_code IS NULL
        </if>
</select>

5.使用实例（封装组件）

（1）组件 components下创建目录DivisionCascader，DivisionCascader下创建index.vue，代码如下

参考：https://blog.youkuaiyun.com/Binglianxiaojiao/article/details/143017798

各种问题参考：el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点、点击标签选中

<template>
  <el-cascader :value="value" :props="props" @change="handleChange" style="width: 100%;" clearable filterable placeholder="请选择行政区划"/>
</template>

<script>
import {findAll} from "@/api/expertveteran/division";

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      props: {
        lazy: true,
        checkStrictly: true,
        lazyLoad (node, resolve) {
          let value=node.value==undefined?"":node.value;
          findAll(value).then(res=>{
            const nodes=res.data;
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          })
        }
      },
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('change', val);
      //单选时加载下级数据
      this.$nextTick(() => {
        const dom = document.getElementsByClassName("el-radio is-checked");
        //这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
      });
    }
  }
}
</script>

<style>
/*单选的级联选择器，点击标签页就可以选中，不用可以去掉*/
.el-cascader-menu .el-radio {
  display: table;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  margin-left: -25px;
  padding-left: 15px;
  margin-top: 6px;
}
.el-cascader-menu .el-radio .el-radio__input {
  display: table-cell;
  vertical-align: middle;
}
</style>

（2）main.js

import DivisionCascader from "@/components/DivisionCascader"

// 全局组件挂载
Vue.component('DivisionCascader', DivisionCascader)

(3)使用

<el-form-item label="行政区划" prop="divisionCode">
  <division-cascader v-model="form.divisionCode"/>
</el-form-item>

(4)其他相关

division.js

import request from '@/utils/request'

// 查询行政区划列表
export function findAll(code) {
    return request({
        url: '/expertveteran/division/findAll?code='+code,
        method: 'get',
    })
}


// 编码处理
export function handleCode(code) {
    if (Array.isArray(code)){
      return code[code.length-1]
    }
    if (code.length==6){
      return [code.substr(0,2),code.substr(0,4),code.substr(0,6)]
    }
    if (code.length==9){
      return [code.substr(0,2),code.substr(0,4),code.substr(0,6),code.substr(0,9)]
    }
}

编码处理

import {handleCode} from "@/api/expertveteran/division";
/** 修改按钮操作 */
handleUpdate(row) {
  this.reset();
  const id = row.id || this.ids
  getExpertInfo(id).then(response => {
    this.form = response.data;
    this.form.divisionCode=handleCode(this.form.divisionCode);
    this.open = true;
    this.title = "修改专家信息";
  });
},
/** 提交按钮 */
submitForm() {
  this.$refs["form"].validate(valid => {
    if (valid) {
      this.form.divisionCode=handleCode(this.form.divisionCode)
      if (this.form.id != null) {
        updateExpertInfo(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addExpertInfo(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    }
  });
},

编辑不回显数据

<el-form-item label="行政区划" prop="divisionCode">
 	<division-cascader v-model="form.divisionCode" v-if="editCascaderVisible"/>
</el-form-item>
<script>
return {
	editCascaderVisible:true,
}
/** 修改按钮操作 */
handleUpdate(row) {
  this.reset();
  const userId = row.userId || this.ids;
  getUser(userId).then(response => {
    this.form = response.data;
    // 这里搞个定时器重新载入一下组件就可以触发组件拉取数据
    this.editCascaderVisible = false;
    setTimeout(() => {
      this.form.divisionCode=handleCode(this.form.divisionCode);
      this.editCascaderVisible = true;
    }, 1);
  });
},
</script>

6.组件传值

（1）代码

<template>
  <el-cascader :value="value" :props="props" @change="handleChange" style="width: 100%;" clearable filterable placeholder="请选择行政区划"/>
</template>

<script>
import {findAll} from "@/api/expertveteran/division";

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    //类型：0=全国，1=贵州省
    type: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      props: {
        typeVal: this.type,
        lazy: true,
        checkStrictly: true,
        lazyLoad (node, resolve) {
          let value=node.value==undefined?this.typeVal:node.value;
          findAll(value).then(res=>{
            const nodes=res.data;
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          })
        }
      },
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('change', val);
      //单选时加载下级数据
      this.$nextTick(() => {
        const dom = document.getElementsByClassName("el-radio is-checked");
        //这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
      });
    }
  }
}
</script>

<style>
/*单选的级联选择器，点击标签页就可以选中*/
.el-cascader-menu .el-radio {
  display: table;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  margin-left: -25px;
  padding-left: 15px;
  margin-top: 6px;
}
.el-cascader-menu .el-radio .el-radio__input {
  display: table-cell;
  vertical-align: middle;
}
</style>

（2）调用

<el-form-item label="单位区划" prop="divisionCode">
              <division-cascader type="0" v-model="form.divisionCode" v-if="editCascaderVisible"/>
            </el-form-item>