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();
});
}