feat(components): [select] add header and footer slot (#14876)

* feat(components): [select] add header and footer slot * fix(docs): [select] incorrect word * fix(theme-chalk): [select-dropdown] incorrect padding * Update docs/en-US/component/select.md Co-authored-by: btea <2356281422@qq.com> * Apply suggestions from code review Co-authored-by: btea <2356281422@qq.com> --------- Co-authored-by: qinzz <qinzz@chint.com> Co-authored-by: btea <2356281422@qq.com>
2025-08-26 04:27:26 +08:00 · 2023-11-27 15:26:48 +08:00
parent 4f347eeec6
commit f37d056441
7 changed files with 233 additions and 5 deletions
--- a/docs/examples/select/custom-footer.vue
+++ b/docs/examples/select/custom-footer.vue
@ -0,0 +1,89 @@
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option
+      v-for="item in cities"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+    <template #footer>
+      <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
+        Add an option
+      </el-button>
+      <template v-else>
+        <el-input
+          v-model="optionName"
+          class="option-input"
+          placeholder="input option name"
+          size="small"
+        />
+        <el-button type="primary" size="small" @click="onConfirm">
+          confirm
+        </el-button>
+        <el-button size="small" @click="clear">cancel</el-button>
+      </template>
+    </template>
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { CheckboxValueType } from 'element-plus'
+
+const isAdding = ref(false)
+const value = ref<CheckboxValueType[]>([])
+const optionName = ref('')
+const cities = ref([
+  {
+    value: 'Beijing',
+    label: 'Beijing',
+  },
+  {
+    value: 'Shanghai',
+    label: 'Shanghai',
+  },
+  {
+    value: 'Nanjing',
+    label: 'Nanjing',
+  },
+  {
+    value: 'Chengdu',
+    label: 'Chengdu',
+  },
+  {
+    value: 'Shenzhen',
+    label: 'Shenzhen',
+  },
+  {
+    value: 'Guangzhou',
+    label: 'Guangzhou',
+  },
+])
+
+const onAddOption = () => {
+  isAdding.value = true
+}
+
+const onConfirm = () => {
+  if (optionName.value) {
+    cities.value.push({
+      label: optionName.value,
+      value: optionName.value,
+    })
+    clear()
+  }
+}
+
+const clear = () => {
+  optionName.value = ''
+  isAdding.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.option-input {
+  width: 100%;
+  margin-bottom: 8px;
+}
+</style>