element-ui|vue element 的 el-cascade 组件如何实现多选点击确认提交操作 vue|element-ui|专栏|vue

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

文章图片

抄送

【element-ui|vue element 的 el-cascade 组件如何实现多选点击确认提交操作】在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(); }); }