`
vue3中element-plus 联级 单点问题
``
<el-cascader
placeholder="xxx"
:options="options"
v-model="shareScope"
clearable
collapse-tags
:show-all-levels="false"
size="small"
ref="elcascader"
:props="props"
popper-class="cscaderS"
>
<template #default="{ data }">
<!-- 这块必须是块级元素,顶满100%,否则过短的文字无法被点击到 -->
<div @click="select(data)">
{{ data.label }}
</div>
</template>
</el-cascader>
import {
reactive,
toRefs,
onMounted,
computed,
watch,
markRaw,
ref,
} from "vue";
setup() {
let router = useRouter();
let store = useStore();
let list = reactive({
shareScope: [],
props: {
multiple: false,
emitPath: false,
//开启懒加载
lazy: true,
checkStrictly: true,
lazyLoad: selDep,
},
countSum: 0,
goValue: "",
reIndex: "",
shareScope: [], //值
options: [
// {
// value: "zhinan",
// label: "指南",
// },
],
key: 0,
});
function select(data) {
list.shareScope = data.value;
}
function selDep(node, resolve) {
let brand = null;
if (node != undefined) {
let { level } = node;
if (node.value == undefined) {
brand = "";
} else {
brand = node.value;
}
if (level < 2) {
resolve();
}
} else {
brand = "";
}
let time = new Date().getTime().toString();
if (brand != "") {
getDept({
TIMESTAMP: time,
VERIFICATION: md5(
""
),
EMPLID: "",
}).then((res) => {
if (res["ERROR_CODE"] == "20000") {
// list.options = markRaw(res["EpEvalDeptInfo"]);
let params = res["EpEvalDeptInfo"];
params.forEach((item, index) => {
if (item.children[0].label == "") {
item.children = [];
}
});
let result = null;
result = params.map((item) => ({
value: item.value,
label: item.label,
children: item.children,
}));
let options = result;
let nodesChildren = null;
options.forEach((item, index) => {
// if ((item.children[0].label = "")) {
// item.children = [];
// }
let opt = item.children;
if (opt != undefined) {
nodesChildren = Array.from(opt).map((itemChild) => ({
value: itemChild.value,
label: itemChild.label,
children: itemChild.children,
}));
}
});
resolve(nodesChildren);
}
});
}
}
// 获取父级数据
function getDeptList(node, resolve) {
console.log("key2:", list.key);
let brand = null;
if (node != undefined && node != null) {
let { level } = node;
brand = node[node.length - 1];
if (level.length > 2) {
resolve();
}
} else {
brand = "";
}
let time = new Date().getTime().toString();
getDept({
TIMESTAMP: time,
VERIFICATION: md5(
),
EMPLID: "",
}).then((res) => {
if (res["ERROR_CODE"] == "20000") {
list.options = markRaw(res["EpEvalDeptInfo"]);
let params = res["EpEvalDeptInfo"];
let result = null;
result = params.map((item) => ({
value: item.value,
label: item.label,
children: item.children,
}));
let options = result;
let nodesChildren = null;
options.forEach((item, index) => {
let opt = item.children;
if (opt != undefined) {
nodesChildren = Array.from(opt).map((itemChild) => ({
value: itemChild.value,
label: itemChild.label,
children: itemChild.children,
}));
}
});
// resolve(nodesChildren);
}
});
}
setTimeout(() => {
if (FlowList.length > 0) {
let time = new Date().getTime().toString();
cheTxt({
TIMESTAMP: time,
VERIFICATION: md5(
""
),
EMPLID: "",
FlowList: FlowList,
}).then((res) => {
if (res["ERROR_CODE"] == "20000") {
ElMessage({
message: "提交成功",
type: "success",
offset: window.screen.height / 5,
});
} else {
ElMessage({
message: res["ERROR_MSG"],
type: "error",
offset: window.screen.height / 5,
duration: 1000,
});
}
});
} else {
ElMessage({
message: "没有可提交项",
type: "warning",
offset: window.screen.height / 5,
});
}
}, 100);
}
onMounted(() => {
list.loading = false;
list.key += 1;
getDeptList();
});
return {
...toRefs(list),
getDeptList,
select,
};
},
css样式
.cscaderS .el-radio {
display: none;
}