forked from integrated_whb/integrated_whb_vue
59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<el-select
|
||
|
|
v-model="modelValue"
|
||
|
|
filterable
|
||
|
|
allow-create
|
||
|
|
placeholder="请选择，可直接输入创建选项"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="(item, index) in list"
|
||
|
|
:key="item.DICTIONARIES_ID"
|
||
|
|
:label="item.NAME"
|
||
|
|
:value="item.DICTIONARIES_ID"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div>{{ item.NAME }}</div>
|
||
|
|
<div>
|
||
|
|
<el-icon @click="fnDelete(index)">
|
||
|
|
<circle-close />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { CircleClose } from "@element-plus/icons-vue";
|
||
|
|
import { useVModel } from "@vueuse/core";
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: "LayoutSelectCreate",
|
||
|
|
});
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["update:modelValue", "delete-option"]);
|
||
|
|
const modelValue = useVModel(props, "modelValue", emits);
|
||
|
|
const fnDelete = (index) => {
|
||
|
|
emits("delete-option", index);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|