根据公司业务需求，需要实现第一级目录无法勾选，其他级目录父级目录勾选则只展示父级名称，子级没有全部勾选，展示子级勾选的子集
想写这篇文章的目的是因为，在没有阅读源码之前感觉有点难，觉得要重写组件，但是阅读源码之后就可以比较容易地做到，所以希望大家有事没事可以多看看源码
看代码会有点乱，等有时间会整理案例的
效果图
html部分
<el-form-item label="职位类型：" prop="position_type_obj">
<el-cascader
ref="cascader"
v-model="publishForm.position_type_obj"
popper-class="cascaderParent"
:disabled="editDisable"
placeholder="请选择职位类型"
:options="potionType"
:props="props"
clearable
:show-all-levels="false"
@change="changedata"
/>
</el-form-item>
第一级目录不显示 通过css做到
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-checkbox {
display: none;
}
js
// 获取数据
created() {
this.getPositionType();
},
获取数据方法
async getPositionType() {
const res = await positionType();
if (res.code === 200) {
this.potionType = res.data;
this.$nextTick(() => {
this.custCascader() // 重点 去重写cascader里面地方法
})
}
},
// 重写 cascader里面地方法
custCascader() {
// 当前级联选择器组件
const cascader = this.$refs.cascader
cascader.computePresentTags = () => {
const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = cascader;
const checkedNodes = cascader.getCheckedNodes(leafOnly);
const tags = [];
const genTag = node => ({
node,
key: node.uid,
text: node.getText(showAllLevels, separator),
hitState: false,
closable: !isDisabled && !node.isDisabled
});
if (checkedNodes.length) {
const [first, ...rest] = checkedNodes;
const restCount = rest.length;
tags.push(genTag(first));
if (restCount) {
if (collapseTags) {
tags.push({
key: -1,
text: `+ ${restCount}`,
closable: false
});
} else {
rest.forEach(node => tags.push(genTag(node)));
}
}
}
tags.forEach((element) => {
const { text, currentId } = this.returnTags(element);
element["text"] = text;
element["currentId"] = currentId;
});
var obj = {};
const presentTags = tags.reduce(function(item, next) {
obj[next.currentId]
? ""
: (obj[next.currentId] = true && item.push(next));
return item;
}, []);
cascader.presentTags = presentTags;
cascader.checkedNodes = checkedNodes;
console.log(tags, checkedNodes)
}
// const _this = this
cascader.deleteTag = function(index) {
const presentTags = cascader.presentTags
const delData = presentTags[index]
const val = delData.node.getValueByOption()
if (delData.node.data.pid === delData.currentId) {
let ids = delData.node.parent.getValueByOption()
ids = ids.join(",")
// 删除的是父节点
console.log("del tag1", delData, val)
const checkedValue = cascader.checkedValue
// var val = checkedValue[index];
cascader.checkedValue = checkedValue.filter(function(n, i) {
console.log(n.join(","), n.join(",").includes(ids))
return !(n.join(",").includes(ids));
});
} else {
const checkedValue = cascader.checkedValue
cascader.checkedValue = checkedValue.filter(function(n, i) {
return n.join(",") !== val.join(",");
});
}
cascader.$emit('remove-tag', val);
}
},
// returnTags 是数据转化 判断子节点是否权限 而在返回在input框需要显示的标签
returnTags(ele) {
const pNode = ele.node.parent;
const isSelectAll = pNode.children.every((item) => item.checked);
let showNode = ele.node;
if (isSelectAll) {
showNode = pNode;
}
return {
text: showNode.label,
currentId: showNode.data.id
};
},
// 初始化选中的数据
changedata(params) {
console.log("change:", params)
setTimeout(() => {
var tags = this.$refs.cascader.presentTags;
tags.forEach((element) => {
const { text, currentId } = this.returnTags(element);
element["text"] = text;
element["currentId"] = currentId;
});
var obj = {};
tags = tags.reduce(function(item, next) {
obj[next.currentId]
? ""
: (obj[next.currentId] = true && item.push(next));
return item;
}, []);
// console.log("showTag", tags)
tags.forEach(item => {
console.log(item.text, item.node.getValueByOption())
})
this.$refs.cascader.presentTags = tags;
console.log("aaaa :", this.$refs.cascader.presentTags)
this.$forceUpdate();
this.publishForm.position_type = chooseJqfl(params);
// 表单出库
this.$refs.publishForm.validateField("position_type_obj");
}, 100);
}