526互联

动态增加自动补全输入框 vue3 ts elementplus

发布时间 2023-05-24 16:29:35作者: yjxQWQ

父元素里这样
<DomainItem1 :data="store.domains2.value" :loadAll="loadAllState5" :placeholder="t('SelectAction')" ></DomainItem1>

DomainItem1元素里这样

<template>
  <el-divider />
  <el-form-item
    v-for="(domain, index) in localData"
    :key="index"
    :label="t('operation') + index"
    :prop="'domains.' + index + '.value'"
  >
    <div class="container">
      <SelectInput
        :data="domain.value"
        :loadAll="loadAll"
        @click="select(index)"
        @selectinput="selectinput"
        :placeholder="t('SelectAction')"
      ></SelectInput>

      <!-- 应该是拼接字符串 -->
      <el-button class="mt-0.1" @click.prevent="removeDomain2(domain)">
        <span class="svg-icon svg-icon-3">
          <inline-svg
            :src="getAssetPath('media/icons/duotune/arrows/arr001copy.svg')"
          />
        </span>
      </el-button>
    </div>
    <el-divider />
  </el-form-item>
  <el-button @click="addDomain2()">{{ t("addto") }}</el-button>
</template>
<script setup lang="ts">
import { getAssetPath } from "@/core/helpers/assets";
import SelectInput from "@/components/modals/forms/selectInput.vue";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import type { DomainItem2 } from "@/stores/maintable";
const { t } = useI18n();

const props = defineProps({
  data: Array as () => DomainItem2[],
  loadAll: Object,
  placeholder: String,
});

const localData = ref(props.data);
const removeDomain2 = (item: DomainItem2) => {
  const index = localData.value!.indexOf(item);
  if (index !== -1) {
    localData.value!.splice(index, 1);
  }
};
let indexnumber = 0;
const select = (index) => {
  indexnumber = index;
};
const selectinput = (param) => {
  localData.value![indexnumber].value = param.value;
};

const addDomain2 = () => {
  localData.value!.push({
    value: "",
  });
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}
</style>


补全输入框我封装过了，之前的教程出过

这里再写一遍

<template>
  <el-autocomplete
    v-model="localData"
    :fetch-suggestions="querySearch"
    clearable
    class="inline-input"
    :placeholder="props.placeholder"
    @select="handleSelect"
  />
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
const props = defineProps({
  data: String,
  loadAll: Object,
  placeholder: String,
});
const emit = defineEmits(["selectinput"]);

const localData = ref(props.data);
interface RestaurantItem {
  value: string;
}
const restaurants = ref<RestaurantItem[]>([]);

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;

  cb(results);
};

const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const handleSelect = (item: RestaurantItem) => {
  localData.value = item.value;
  selectinput();
};

onMounted(() => {
  restaurants.value = props.loadAll?.value;
});

const selectinput = () => {
  emit("selectinput", {
    value: localData.value,
  });
};
</script>