elementplus el-select控制el-input 的显隐并清除el-input内容

最新推荐文章于 2024-07-31 17:17:36 发布

终遇长安雪

最新推荐文章于 2024-07-31 17:17:36 发布

阅读量906

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hln136285/article/details/138221384

版权

文章描述了在Vue项目中，如何使用el-select选择框判断选中值是否在数组中，以及在选择后如何确保正确地隐藏和清空输入框的问题，最终通过`$nextTick`解决了数据变化异步影响DOM更新的问题。

摘要由CSDN通过智能技术生成

背景：一个组件中，数组A中一些元素，使用el-select的选择框，选择后需要判断已选中的值是否在数组A中，如果在，则隐藏el-input 框，并清空其值，如果不在这不做隐藏处理。v-if用于对别的条件判断，但是又不是‘&’的关系，所以只能使用v-show。遇到的情况是，在选择后，填数据，再选择在A数组中选项后，预期应该隐藏，但是实际并没有（下面的代码并不能复现原场景）

<template>
  <div>
    <el-button type="primary" @click="AddHandle"> ++ </el-button>
    <el-form :model='item' v-for="(item, i) in listOP" :key=i>
      <el-form-item label>
        <el-select v-model="item.options" placeholder @change="selectHandler(item)">
          <el-option
            v-for="(ite,index) in optionList"
            :label="ite.name"
            :value="ite.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="label" v-show="isShow" >
        <el-input  label="值" v-model="item.value" placeholder="plasses input"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive } from 'vue';

const isShow = ref(true);
const A = ref(["red", "yello"]);
const listOP = ref([])
const optionList = ref([
  {
    name: "pink",
    value: "pink"
  },
  {
    name: "black",
    value: "black"
  },
  {
    name: "red",
    value: "red"
  },
  {
    name: "yello",
    value: "yello"
  },
  {
    name: "blue",
    value: "blue"
  }
]);
const data = reactive({
    form:{}
})
const { form } = toRefs(data)
function selectHandler(item) {
    console.log(item,A.value)
  if (A.value.includes(item.options)) {
    item.value = "";
    isShow.value = false;
  } else {
    isShow.value = true;
  }
}
function AddHandle(){
    listOP.value.push({
    options:'pink',
    value:''
},)
}
</script>

解决办法：

<script>
let {proxy} = getCurrentInstance()
function selectHandler(item) {
    console.log(item,A.value)
  if (A.value.includes(item.options)) {
    item.value = "";
    proxy.$nextTick(()=>{  //因为vue3数据的变化是异步执行的，这意味着直接在事件处理器中修改数据并不会立即反映到 DOM 上，所以需要使用nextTick
        isShow.value = false;
})
  } else {
    isShow.value = true;
  }
}
</script>