ElementUI+Vue的下拉框联动右边输入框自己敲

Posted 2022-03-07 houzhicongone

文章目录

1. 需要有下拉框和输入框 代码如下：

  <template slot-scope="scope">
              <el-select clearable
                v-model="dataList2[scope.$index].rulcon"
                @change="changeByCustom"
                style="width: 140px;"
              >
            <el-option label="重叠5%" value="1.0000"></el-option>
            <el-option label="不重叠" value="2.0000"></el-option>
            <el-option label="自定义比例" value="3.0000" ></el-option>
            
              </el-select>

                <el-input 
                style="width: 160px;"  v-if="linkvalue==3.0000 || dataList2[scope.$index].rulcon ==3.0000" v-model="dataList2[scope.$index].ruldata"> 
                 
                   <template
                  
                  slot="append"
                  >%</template
                >

               
               </el-input>
            </template>

2. 通过@change="changeByCustom"事件，只要select的选中的值发生变化就会产生联动.

methods: 
 changeByCustom(value)
      this.linkvalue=value;
      console.info(value,"value----------------");
      

    ,
    

3. 记得在data里面 加上一个初始化的值，因为一改变选中的下拉框，这个@change函数就会触发联动，所以需要我们控制一下什么时候触发，可以用v-if=“linkvalue==你的触发的时候的value的值”

 linkvalue:"",

4. 通过 v-if="linkvalue==3.0000 || dataList[scope.&index].rulcon == 3.0000 "
   也就是选中自定义比例为3的时候产生输入框，或者已经为3的输入框也会出现，不可以是&&
5. 经过多次的测试慢慢，和良好的逻辑才可以分析出问题，不可以操之过急。
6. 成功的效果如下所示：
   ![在这里插入图片描述