vue element 的 el-cascade 组件如何实现多选点击确认提交操作_JavaScript_@必意玲-CSDN博客

安宇雨 - 随手采集
2020-03-10 17:16:46
随手采集
0000-未整理-等待研究

`1. 实现效果`

做这个也是自己踩了好多坑，比如：
用第三方的 el-cascader-multi 多选组件，不能实现自己想要的效果，element 最新版 2.12.0 就已经有完善，不需要使用那个第三方的了，其他的坑，可以访问 vue element Cascader 级联选择器选择任意一级选项点击收起，点击label选中等问题详解
在这里插入图片描述

<div class="content-item">
  <label>抄送</label>
  <div class="cc">
    <el-cascader
      v-model="ccValue"
      ref="ccCascader"
      separator="/"
      :options="ccData"
      :props="props"
      @change="ccChange"
      clearable
      expand-trigger="hover"
      collapse-tags
      popper-class="ticket_ccCascader"
    ></el-cascader>
  </div>
</div>

在data 中把 :props 属性映射为 即可实现多选功能。

props: {
  multiple: true
},

`2. 这里主要是在组件里面添加一个确认按钮，点击按钮实现`

methods: {
  formatCC() {
    let htmladd = document.createElement("bottom");
    htmladd.innerHTML = "确认";
    htmladd.className = "htmladd";
    htmladd.style.cssText =
      "cursor: pointer;position: absolute;bottom: -35px;height: 35px;line-height:35px;width:100%;background:#fff;text-align: center;color:#606266;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);";
      let that = this;
      var el_l = document.querySelectorAll(".el-popper.el-cascader__dropdown.ticket_ccCascader");
      if (el_l.length > 0 && el_l.length == 1) {
        var el = el_l[0];
        if (!el.querySelector(".htmladd")) {
          el.appendChild(htmladd);
          var bo = el.querySelectorAll(".htmladd")[0];
          bo.onclick = function() {
            that.$refs.ccCascader.dropDownVisible = false;
            let params = {
              id: that.ticketObject.id,
              cc: that.ticketOrder.cc
            };
            that.$axios
              .put(that.$httpServer.updateTicketOrder, params)
              .then(res => {
                if (res && res.data.code == "0") {
                  that.$message1({
                    message: "保存成功",
                    type: "success",
                    duration: 500
                  });
                  that.handleNodeClick(that.types, that.ticketObject.id);
                  that.getTicketsNum();
                }
              });
          };
        }
      }
  },
},
mounted() {
  let that = this;
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
    this.$nextTick(function() {
        that.formatCC();
    });
  },
  updated() {
    this.$nextTick(function() {
      this.formatCC();
    });
  }

Original url: Access
Created at: 2020-03-10 17:16:44
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到