el-select 两个选择器 选择其中一个值，让另外一个不显示-----和控制按钮操作

我们用 v-if 控制 两个值的隐藏，显示 下面图片效果

       

---

两个选择器

                1： 触发类型 选择器

                2： 运营商类型 选择器

        当我们选择 未划分通道时

        

 2： 选中时 运营商类型 会隐藏

 

3： 这是一开始的

 意思也就是   当我们其中一个选择器下面有很多值的时候，我们选中其中一个值，会隐藏另一个选择器

                下面是实现方法

                在选择器中加  @change="TaskArr" 定义 TaskArr  

                div   加上  v-if="trigger_typeShow"   

         <div  v-if="trigger_typeShow" >
            <el-form-item  prop="status" label-width="100px">
               <span slot="label">
                触发类型
               </span>
              <el-select
                @change="TaskArr"
                v-model="forArr.trigger_type"
                placeholder="请选择触发类型"
                clearable
                ref="packageSel"
                size="small"
                style="width: 360px"
              >
                <el-option
                  v-for="dict in TaskOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            </div>

  <div v-if="operation_typeShow" >
            <el-form-item  prop="status" label-width="100px" v-if="showPrise">
               <span slot="label">
                运营商类型
               </span>
              <el-select
                multiple
                v-model="forArr.operation_type"
                placeholder="请选择运营商类型"
                clearable
                ref="packageSel"
                size="small"
                style="width: 360px"
              >
                <el-option
                  v-for="dict in operation_type"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            </div>

在 data(){ 定义   默认是 true

  data() {
    return {
      centerDialogVisible: false,
      cardAdd: false,
      cardEdie: false,
      trigger_typeShow:true,
      operation_typeShow: true,
        }
}

在 methods 使用 我的未划分通道 是类型 6

   /**触发类型 选择*/
    TaskArr(){
      if(tools.Is_null(this.forArr.trigger_type)){ //判断不能为空
        if(this.forArr.trigger_type == '6'){
          this.trigger_typeShow =true;
          this.operation_typeShow =false;
        }else {
          this.trigger_typeShow =true;
          this.operation_typeShow =true;
        }
      }
    },

二 、下面的是按钮操作

        一开始我有三个按钮  状态 有效 1 和无效 0

        需求是 ； 删除是把状态 改为0   ，回收是把状态 改为 1  

                        如果状态是 1  那就显示删除按钮 ，其他的按钮不显示

                        如果状态是 0  那就显示 回收 和 彻底删除

         下面是效果 图   当我们点击删除按钮

 删除  之后就会出现这两个按钮

 再点击 回收  变会 之前状态

 下面是代码   v-if 控制  fit 是对象 就相当于我们的 row

pic_status 是状态 1 和 0

    

                <template>
                  <div v-if="fit.pic_status==1">
                    <el-button
                      size="mini"
                      type="primary"
                      plain
                      @click="StatusInvalid(fit)"
                      v-hasPermi="['yunze:XsglCustomer:switch']"
                    >删除
                    </el-button>
                  </div>
                  <br>
                  <div v-if="fit.pic_status==0"> <!-- v-if="Effective" -->
                    <el-button
                      size="mini"
                      type="success"
                      plain
                      @click="RecoveryEffective(fit)"
                      v-hasPermi="['yunze:XsglCustomer:effective']"
                    >回收
                    </el-button>
                  </div>
                  <br>
                  <div v-if="fit.pic_status==0"> <!-- v-if="singleD" -->
                    <el-button
                      size="mini"
                      type="danger"
                      plain
                      @click="singleDelete(fit)"
                      v-hasPermi="['yunze:XsglCustomer:single']"
                    >彻底删除
                    </el-button>
                  </div>
                </template>