Cascader 级联选择器指定值禁用添加其他参数+清空上一次校验

原创

已于 2023-11-28 18:10:05 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

于 2023-03-30 16:30:23 首次发布

文章讲述了在Vue.js应用中如何实现在Cascader级联选择器中禁用已选值，以及在选中后如何传递除label和value之外的其他参数，如生产力值。主要涉及动态列表渲染、表单验证和递归方法来处理数据。

需求

（1）开发中遇到Cascader 级联选择器选中后给对应值禁用不让选。这里通过动态列表循环渲染Cascader 级联选择器选择框的。每次新增后选中对应值，再点击新增后不让选择之前选中过的数据。

在这里插入图片描述

（2）Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们需要使用到生产力值的参数值。通过生产力值乘数量来计算总计的数据。

![在这里插入图片描述](https://img-blog.csdnimg.cn/639f4e8e84494230bdea7f813d32a28f.png

1，实现思路

首先要在选中值的监听事件里面进行调用禁用的方法。然后再调用禁用方法里面通过递归循环，获取选中的数据，递归给已经选中的数据添加disabled=true属性；
Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们可以通过再递归方法里面再添加循环动态列表判断选中的值等于列表里面值然后赋值生产力值produceValue

2，实现代码

 <!-- 新建线下生产力 -->
     <el-dialog
      title="新建线下生产力"
      :visible.sync="addofflineproductFormVisible"
       width="35%"
    >
      <el-form
        :model="addofflineproductForm"
        :rules="addofflineproductFormRules"
        ref="addofflineproductForm"
        label-width="130px"
        class="productbox"
      >
        <div class="productContentbox" v-if="addofflineproductForm.produceList.length > 0">
          <div v-for="(item, index) in addofflineproductForm.produceList" :key="index">
            <el-form-item label="申报类型" :prop="'produceList.'+ index +'.produceConfigId' " :rules="{ required: true, message: '请选择申报类型', trigger: 'blur' }" class="subsettypebox">
              <el-cascader
                v-model="item.produceConfigId"
                :options="declarationTypeOptions"
                @change="childrentypeChange(item.produceConfigId)"
                ref="cascaderMallCatergory"
                placeholder="请选择申报类型"
                filterable
                :show-all-levels="false"
                :props="{ emitPath: false }"
              >
              </el-cascader>
              <i @click="addproductClick(item, index)" class="btn-group el-icon-circle-plus-outline"></i>
              <i @click="removproductClick(index)" class="btn-group del el-icon-delete" v-show="addofflineproductForm.produceList.length > 1"></i>
            </el-form-item>
            <el-form-item
              label="数量"
              :prop="'produceList.'+ index +'.value'"
              :rules="{ required: true, message: '请输入申报类型数量', trigger: 'blur' }"
            >
              <el-input-number @change="typeNumberChange(item.produceConfigId)" style="width: 200px;" size="small" placeholder=

最低0.47元/天解锁文章