vue之ele多级联组件的使用方法详解

本文实例为大家分享了vue之ele多级联组件的使用具体代码,供大家参考,具体内容如下

多级联组件的使用

html

<el-cascader
        ref="cascader"
        :options="options"
        @focus="cascaderFocus"
        @change="cascaderChange"
        v-model="cascadeValue"
        :props="propsVal"
        popper-class="cascader"
></el-cascader>

js

data () {
    return {
        options : [
        {
          value: "01",
          label: "科技",
          parentValue: "0",
          children: [
            {
              value: "0101",
              label: "半导体",
              parentValue: "01",
              children: [
                {
                  value: "010101",
                  label: "环",
                  parentValue: "0101",
                },
              ],
            },
            {
              value: "0102",
              label: "半导体2",
              parentValue: "01",
              children: [
                {
                  value: "010201",
                  label: "显1",
                  parentValue: "0102",
                },
              ],
            },
            { value: "0103", label: "产业", parentValue: "01" },
          ],
        },
        {value: "02", label: "业", parentValue: "0" }, // 没有子集的时候 
        {value: "04", label: "类", parentValue: "0",children: [], }
      ],
            cascadeValue: [], //级联选中的值
            currentIndustry:[], 
      propsVal: {
        checkStrictly: true,
      },
    };
  },
  methods: {
    cascaderFocus(){
            console.log("jiagouFocus");
    },
    cascaderChange(valArr){
     console.log("jgTreeChange", valArr);
      this.currentIndustry = valArr
    },
  }
  // 重置的时候
    reset() {
      this.$refs.cascader.checkedValue = [];
      this.$refs.cascader.dropDownVisible = false;
    },

css

.cascader .el-scrollbar{
  min-width: 120px!important;
  max-width: 100%;
}
.cascader .el-cascader-node{
  padding: 0 18px 0 0;
  height: 30px;
}
.cascader.el-cascader-node .el-cascader-node__postfix{
  right: 5px;
}
.cascader .el-cascader-node > .el-radio{
  margin-left: 7px;
}

vue 之ele多级联组件 添加额外的按钮

需求:

  • 第一层:集团; 第二层:板块; 第三层:产业
  • 在ele多级联组件之中,第一层的时候添加一个全部按钮,点击第一层的全部的时候,则直接查询所有集团的数据;
  • 在ele多级联组件之中,第二层的时候添加一个全部按钮,点击第二层的全部的时候,则直接查询所有板块的数据;
  • 点击级联的第三层的时候,才加载数据!

HTML

  • groupName :则是需要现实的 点击了第二层的全部的时候,才显示的!否则的话,走多级联三层选中,显示效果!
  • cascadeValue :级联选中的值
  • propsVal : 级联动态加载的配置属性
  • selectChange : 级联选中的时候触发的函数
  • expandChange: 级联展开触发

目的:点击级联的时候,只是在点击第二层的时候,获取到第一层集团的选中的值!

<div class="top_pane_select">
  <div class="group_name" v-if="showGroupName" >{{ groupName }} / 全部</div>
  <el-cascader
    ref="cascader"
    v-model="cascadeValue"
    :props="propsVal"
    @change="selectChange"
    @expand-change="expandChange"
  ></el-cascader>
</div>

js

data() {
    return {
      propsVal: {
      // 点击的时候 触发
        expandTrigger: "click",
        // 完整路径
        emitPath: true,
        // 动态加载
        lazy: true,
        // 动态加载的时候 触发渲染dom节点
        lazyLoad: (node, resolve) => {
          this.selectLazyLoad(node, resolve);
        },
      },
      currentIndustry: [], // 当前产业
      groupName:"",// 当选中为 集团 + 第二级 全部的时候 显示再级联菜单
      firstHomeGroup:[], // 集团的数据
      showGroupName:false, 
      jtCode:"", // 当前集团选中的code
      cascadeValue: [], //级联选中的值
     }
  }
  watch: {
      // 级联选中的值 判断:当选中的值 为空数组(也就是查询所以集团的数据时候),调用级联的重置方法!
    cascadeValue(newV) {
      if (newV.length === 0) {
        this.selectReset();
      }else{
        this.groupName = "";
      }
    },
    // 当前选中的产业 传递到子组件的数据
    currentIndustry(newV){
      this.currentIndustry = newV;
      if(newV.length == 0){
        this.groupName = "";
        this.showGroupName = false;
      }
    }
  },
methods: {
    // 创建dom节点 和 删除 dom节点
    createDom(dom){
      let li = document.createElement("li")
      li.innerHTML = "全部";
      dom.insertBefore(li, dom.children[0])
      dom.children[0].style.paddingLeft = "10px";
      dom.children[0].style.cursor = "pointer";
    },
    destroyedDom(dom){
      dom.removeChild(dom.children[0])
    },
    // 级联选择器 动态加载数据
    selectLazyLoad(node, resolve) {
      const { level } = node;
      if (level == 0) {
        // 请求集团的数据
        getHomeGroup().then(({ data }) => {
          this.firstHomeGroup  = data.dat;
          this.renderNode(data, level, resolve);
        });
      } else if (level == 1) {
        // 请求板块的数据
        let groupNo = node.data ? node.data.value : null; // 拿到选中的第一级的value
        getHomePlate(groupNo).then(({ data }) => {
          this.renderNode(data, level, resolve);
        });
      } else if (level == 2) {
        // 请求产业的数据
        let palteNo = node.data ? node.data.value : null; // 拿到选中的第二级的value
        getHomeIndustry(palteNo).then(({ data }) => {
          this.renderNode(data, level, resolve);
        });
      }
    },
    // 渲染dom节点 就是拿到后台请求的数据的时候,渲染dom节点
    renderNode(data, level, resolve) {
      if (data.code == 0 && data.dat.length > 0) {
        let nodes = data.dat.map((item) => {
          return {
            value: item.code,
            label: item.name,
            leaf: level >= 2,
          };
        });
        resolve(nodes);
        if( level === 0){
          this.$nextTick(() => {
            let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(1) .el-scrollbar__view")
            this.createDom(dom);
            dom.children[0].onclick = () => {
              this.jtCode = "";
              this.cascadeValue = [];
              this.currentIndustry = [];
              this.selectChange([]);
              this.$refs.cascader.dropDownVisible = false;
              this.selectReset();
            }
          })
        }
      }
    },
    // 级联展开 只为创建最新的dom节点
    expandChange(item){
      // console.log('展开item',item);
      if(item.length === 1){
        this.$nextTick(() => {
          let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(2) .el-scrollbar__view");
          if(dom.children[0].innerText == "全部"){
            this.destroyedDom(dom);
            this.createDom(dom);
            this.groupClick(item);
          }else{
            this.createDom(dom);
            this.groupClick(item);
          }
        })
      }
    },
    // 点击 集团的时候 创建 全部 按钮
    groupClick(item){
      this.$nextTick(() => {
        let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(2) .el-scrollbar__view");
        if(dom.children[0]){
          dom.children[0].onclick = () => {
            this.jtCode = item[0];
            this.currentIndustry = [this.jtCode, ""];
            // this.selectChange(this.currentIndustry);
            this.firstHomeGroup.forEach(item => {
              if(item.code == this.jtCode){
                this.groupName = item.name;
                this.showGroupName = true;
              }
            })
            this.selectReset();
            this.$refs.cascader.dropDownVisible = false;
          }
        }
      })
    },
    // 级联选中的时候 对数据的判断!
    selectChange(item) {
      // console.log("级联选中item", item,item.length);
      // this.currentIndustry = item[item.length - 1];
      if(item.length == 3){
        this.currentIndustry = item;
        this.showGroupName = false;
        this.groupName = "";
      } else {
        if(this.jtCode){
          this.currentIndustry = [this.jtCode,""];
        }else{
          this.currentIndustry = [];
        }
      }
    },
    // 级联下拉菜单 重置
    selectReset() {
      const _cascader = this.$refs.cascader;
      if (_cascader) {
        _cascader.$refs.panel.checkedValue = [];
        _cascader.$refs.panel.activePath = [];
        _cascader.$refs.panel.syncActivePath();
      }
      let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(2) .el-scrollbar__view");
      if(dom){
        if(dom.children[0].innerText == "全部" && dom.children[0]){
          dom.removeChild(dom.children[0])
        }
      }
    },

},

CSS

.top_pane_select {
          position: relative;
          margin-top: 2px;
          margin-left: 115px;
          width: 240px;
          height: 24px;
          border: 1px solid #e82323;
          border-radius: 2px;
          overflow: hidden;

          ::v-deep .el-cascader {
            top: -8px !important;
            width: 240px!important;

            .el-input__inner {
              color: #e82323;
              border: none !important;
            }
          }
          // 单独选中 集团的时候 显示
          .group_name{
            background: #fff;
            z-index: 10;
            position: absolute;
            top: 2px;
            left: 15px;
            width: 40%;
            height: 22px;
            line-height: 22px;
            color: #e82323;
          }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于Vue2实现简易的省市区县三级联动组件效果

    这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等.提供原始省市县代码和名称数据,适用于各种有关城市区县的应用. 安装 我们使用npm安装: npm install v-distpicker --save 使用 首先在模板中加入组件: <v-distpicker></v-distpicker> 如果要带默认值,则可以这样: <v-distpicker province="广东省" city="广州市

  • vue移动端城市三级联动组件使用详解

    本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下 先看效果图 以下组件代码 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> <p class="text

  • vue.js模仿京东省市区三级联动的选择组件实例代码

    前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section cl

  • Vue.js组件tree实现省市多级联动

    小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo

  • vue之ele多级联组件的使用方法详解

    本文实例为大家分享了vue之ele多级联组件的使用具体代码,供大家参考,具体内容如下 多级联组件的使用 html <el-cascader         ref="cascader"         :options="options"         @focus="cascaderFocus"         @change="cascaderChange"         v-model="cascad

  • 对Vue table 动态表格td可编辑的方法详解

    项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope

  • Vue3内置组件Teleport使用方法详解

    目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染 前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置 场景举例:一个 Button ,点击后呼出模态对话框 这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间 这样就有了一个问题:组件的

  • Vue利用openlayers实现点击弹窗的方法详解

    目录 解释 编写弹窗 引入 openlayer使用弹窗组件 点击事件 这个写的稍微简单一点就行了,其实呢,这个不是很难,主要是知道原理就可以了. 我想实现的内容是什么意思呢?就是说页面上有很多坐标点,点击坐标点的时候在相应的位置弹出一个框,然后框里显示出这个坐标点的相关数据. 解释 这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了. 编写弹窗 首先一点,我们这个弹窗需要自己写一下,具体的样式,展示的内容之类的,所以说写一个弹窗组件,然后在openlayer文件中引用加载. 比

  • vant/vue实现小程序下拉刷新功能方法详解

    首先先把van-list控件放入列表项中 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <list-nav :list="list"></list-nav> </van-list> data(){ return{ list: [],

  • VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • vue实现购物车抛物线小球动画效果的方法详解

    本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发 首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

随机推荐