iview的Select选择器清空选择项操作

一、iview组件的自带的清空操作

图片来自官网

在<Select></Select>组件添加clearable属性。

然后调用组件方法

this.$refs.selectTextT.clearSingleSelect()

完整代码如下：

二、自制input代替原input输入框

自制input代替原input输入框，实现删除输入随意

代码如下：

<template>
  <div class="box">
    <Select
      ref="selectText"
      type="select"
      :visible="true"
      filterable
      clearable
      :placeholder="'请输入关键词'"
      class="textbox-row-right"
      @on-select="searchSelect"
    >
      <Option
        v-for="(item, index) in dataList"
        :key="index"
        :style="{
          maxWidth: 350 + 'px',
          minWidth: 220 + 'px',
          width: 200 + 'px',
        }"
        :value="item.value"
        :label="item.label"
        >{{ item.label }}</Option
      >
    </Select>
    <input
      v-model="inputtext"
      class="select-input"
      type="text"
      :placeholder="'请输入关键词'"
      @keyup="keyup"
      @focus="inputFocus"
      @blur="inputBlur"
    />
    <Select
      ref="selectTextT"
      type="select"
      :visible="true"
      filterable
      clearable
      class="selectTwo"
      :placeholder="'请输入关键词'"
      @on-select="searchSelect"
    >
      <Option
        v-for="(item, index) in dataList"
        :key="index"
        :style="{
          maxWidth: 350 + 'px',
          minWidth: 220 + 'px',
          width: 200 + 'px',
        }"
        :value="item.value"
        :label="item.label"
        >{{ item.label }}</Option
      >
    </Select>
    <button @click="handleclear">清空</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          value: "New York",
          label: "New York",
        },
        {
          value: "London",
          label: "London",
        },
        {
          value: "Sydney",
          label: "Sydney",
        },
        {
          value: "Ottawa",
          label: "Ottawa",
        },
        {
          value: "Paris",
          label: "Paris",
        },
        {
          value: "Canberra",
          label: "Canberra",
        },
      ],
      inputtext: ''
    };
  },
  methods: {
    keyup() {
      this.inputFocus();
      if (this.inputtext) {
        this.$refs.selectText.setQuery(this.inputtext);
      } else {
        this.$refs.selectText.setQuery(" ");
      }
    },

    inputFocus() {
      document
        .querySelector(".textbox-row-right")
        .classList.add("ivu-select-visible");
      document.querySelector(
        ".textbox-row-right .ivu-select-dropdown"
      ).style.display = "block";
    },
    inputBlur() {
      document
        .querySelector(".textbox-row-right")
        .classList.remove("ivu-select-visible");
      document.querySelector(
        ".textbox-row-right .ivu-select-dropdown"
      ).style.display = "none";
    },

    searchSelect(){},
    handleclear(){
      //方法一
      this.$refs.selectTextT.clearSingleSelect()
    }
  },
};
</script>
<style>
.textbox-row-right .ivu-select-input{
  display: none;
}
</style>
<style scoped>
.box {
  width: 540px;
  height: 100%;
  position: relative;
}
.box .textbox-row-right,
.selectTwo{
  width: 200px;
}

.box .select-input{
  position: absolute;
  left: 58px;
  top: 6px;
  border: none;
}
.box .select-input:focus {
  outline: none;
}
.box button{
  width: 50px;
  height: 30px;
  border: 1px solid #e1e1e1;
}
</style>