需求:
需要支持多选以及能搜索,并且 点击所有队伍最新版本这个功能按钮时,要将用户勾选的数据保存的前提下,将满足条件的数据也一并勾选。最后保存的数据 只需要子级的id,组成数组就行了,所以我这里有用到emitPath: false 这个属性
譬如当前用户选择了8556, 然后点击 所有队伍最新版本。
效果应该是这样的:
完整代码如下 :
<el-form-item label="目标样本集" prop="extractSampleIds">
<el-cascader
@visible-change="chooseTarget"
placeholder="请选择各队最新版本"
:options="sampleOptions"
v-model="rulesForm.extractSampleIds"
ref="cascader"
:props="{
multiple: true,
value: 'id',
label: 'name',
emitPath: false,
}"
filterable
>
</el-cascader>
<el-button class="newest-btn" type="text" @click="setInitialSelection"
>所有队伍最新版本</el-button
>
</el-form-item>
methods: {
// 获取团队分组数据
async getGroup() {
const { competitionId, sampleType } = this.rulesForm;
const res = await teamSimpleApi.queryTeam(competitionId, sampleType);
const { code, object, msg } = res.data || {};
if (code === 0) {
this.sampleOptions = object.map((item) => {
return {
id: item.teamId,
name: item.teamName,
children: item.samples.map((second) => {
return {
id: second.id,
name: second.submitVersion,
latestVersion: second.latestVersion,
};
}),
};
});
} else {
this.$notify({
title: "错误",
message: msg,
type: "error",
});
}
},
setInitialSelection() {
let selectedIds = []; // 创建一个新的数组用于存储选中的sample.id
this.sampleOptions.forEach((team) => {
team.children.forEach((sample) => {
if (sample.latestVersion === 1) {
selectedIds.push(sample.id);
}
});
});
// 使用新数组替换旧数组
this.$set(this.rulesForm, "extractSampleIds", selectedIds);
},
}
希望有帮助到你~