Cascader 级联选择器一级单选二级多选

发布于:2025-02-11 ⋅ 阅读:(57) ⋅ 点赞:(0)
  <el-form-item
                                                                label="开关配置"
                                                                :rules="[
                                                                    { required: false, 
                                                                    message: '开关配置', 
                                                                    trigger: 'blur' }]">
                                                                <el-cascader
                                                                    style="width: 300px"
                                                                    clearable
                                                                    collapse-tags
                                                                    filterable
                                                                    :props="{multiple: true}"
                                                                    v-model="cascaderValue"
                                                                    @change="cascaderHandleChange"
                                                                    :options="dsConfigOption"
                                                                    ref="cascader">
                                                                    <template slot-scope="{ node, data }">
                                                                        <span v-if="node.level !== 4">{{ node.label }}</span>
                                                                        <el-input
                                                                            v-else
                                                                            v-model="node.value"
                                                                            @input="handleInputChange(node, $event)"
                                                                            placeholder="请输入值"></el-input>
                                                                    </template>
                                                                </el-cascader>
                                                            </el-form-item>

dsConfigOption :

[{"value":1,"label":"enable_Replay_MachineLearningAI_TDM","children":[{"value":21,"label":"客户端与DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":22,"label":"仅DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":23,"label":"仅客户端","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":24,"label":"安全控制阀","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]}]},{"value":2,"label":"test","children":[{"value":21,"label":"客户端与DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":22,"label":"仅DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":23,"label":"仅客户端","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":24,"label":"安全控制阀","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]}]}]

cascaderHandleChange

        cascaderHandleChange(e) {
            if (!e.length) return;

            const tempId = this.dsIds.tempId === 0 ? e[0][0] : this.dsIds.tempId;

            const sameArr = e.filter(item => item[0] === tempId);
            const unSameArr = e.filter(item => item[0] !== tempId);

            if (unSameArr.length) {
                this.dsIds.tempId = unSameArr[0][0];
                this.cascaderValue = unSameArr;
            } else {
                this.cascaderValue = sameArr;
            }
        },


网站公告

今日签到

点亮在社区的每一天
去签到