vue封装el-cascader级联选择器组件单选、多选、搜索、数据回显问题

歪西歪是梨子的晕车药

已于 2024-11-22 17:34:15 修改

阅读量1.3k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 ecmascript

于 2024-11-22 17:29:19 首次发布

本文链接：https://blog.csdn.net/qq_34129170/article/details/143973211

不知道怎么描述，反正是折腾了大半天，前端也不是很精通，看一下文档，如果有人遇到和我一样的问题，希望能给到一点启发吧

刚开始的需求描述

最近项目上需要使用级联选择器，绑定组织机构，组件需要满足以下要求：

在编辑详情时只能进行单选，在单选情况下，可以选择任何一级，如下图所示

在这里插入图片描述

在列表查询时支持多选，在多选情况下，选择父节点可以全选子节点，父子节点一起作为参数过滤查询列表，如下图所示

以上功能看el-cascader的官方说明文档，是能直接实现的，上一部分代码：
1）封装组件部分

<el-cascader
      :options="information"
      ref="cascaderAddr"
      v-model="dwCodes"
      :show-all-levels="false"
      :props="propsOpyions"
      @change="handleChange"
      collapse-tags
      collapse-tags-tooltip
      clearable
      filterable
      :disabled="disabled"
    >
</el-cascader>

export default {
   
   
	props: {
   
   
		value: {
   
   
            type: null
        },
        // 是否禁用
        disabled: {
   
   
          type: Boolean,
          default: false,
          required: false
        },
        // 是否多选
        multiple: {
   
   
          type: Boolean,
          default: false,
          required: false
        }
    },
    data() {
   
   
      return {
   
   
        dwCodes: [], //回显绑定的值
        information: [], // 选择器数据源
        propsOpyions: {
   
   
          multiple: true, // 是否允许多选
          emitPath: false, // 是否展示完整路径
          checkStrictly: true, // 是否可选择任意一级
          expandTrigger: 'click' // 展开事件
        }
      };
    },
    created() {
   
   
      this.init()
      this.propsOpyions.multiple = this.multiple
      // 多选时，若checkStrictly为true,则选择父节点时，只能选到父节点
      // 不能全选它下面的所有子节点，所以需要设置为false
      if(this.multiple) {
   
   
         this.$set(this.propsOpyions, 'checkStrictly', false)
      }
    },
    watch: {
   
   
      value: {
   
   
        // 数据回显，很重要
        handler(newVal,