lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
153b2b91da837ad292ef648f2b0cbc1d0a2eac4e
vxe-table/examples/views/select/Select.vue
xuliangzhan 153b2b91da 优化下拉框
2023-12-24 18:36:43 +08:00

614 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<h2>{{ $t('app.aside.nav.select') }}</h2>
<p class="tip">下拉框，查看 <router-link class="link" :to="{name: 'VXEAPI', params: {name: 'select'}}">API</router-link>，可以通过 <router-link class="link" :to="{name: 'StartGlobal'}">setup</router-link> 设置全局参数</p>
<p>
<vxe-select v-model="demo1.value10" placeholder="默认尺寸">
<template #header>
<div>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
</div>
</template>
<template #footer>
<div>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
</div>
</template>
<vxe-option v-for="num in 15" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value11" placeholder="中等尺寸" size="medium">
<vxe-option v-for="num in 10" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value12" placeholder="小型尺寸" size="small">
<vxe-option v-for="num in 10" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value13" placeholder="超小尺寸" size="mini">
<vxe-option v-for="num in 10" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
</vxe-select>
</p>
<p>
<vxe-select v-model="demo1.value20" placeholder="请选择" prefix-icon="fa fa-user-o">
<vxe-option v-for="num in 3" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value21" placeholder="可搜索" filterable clearable>
<template #header>
<div>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
</div>
</template>
<template #footer>
<div>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
<vxe-button type="text">按钮</vxe-button>
</div>
</template>
<vxe-option v-for="num in 11" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value24" placeholder="远程搜索" filterable clearable remote :remote-method="remoteMethod24">
<vxe-option v-for="(item, index) in demo1.list24" :key="index" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value22" placeholder="自定义选项样式" clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2" class-name="red"></vxe-option>
<vxe-option value="3" label="选项3" class-name="green"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5" class-name="red"></vxe-option>
<vxe-option value="6" label="选项6"></vxe-option>
<vxe-option value="7" label="选项7"></vxe-option>
<vxe-option value="8" label="选项8"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value23" placeholder="分组" clearable transfer>
<vxe-optgroup label="选项2">
<vxe-option value="2-1" label="选项2-1"></vxe-option>
<vxe-option value="2-2" label="选项2-2"></vxe-option>
<vxe-option value="2-3" label="选项2-3"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项3">
<vxe-option value="3-1" label="选项3-1"></vxe-option>
<vxe-option value="3-2" label="选项3-2"></vxe-option>
</vxe-optgroup>
</vxe-select>
</p>
<p>
<vxe-select v-model="demo1.value30" placeholder="禁用" disabled>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value31" placeholder="禁用选项" clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2" disabled></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value32" placeholder="禁用分组" clearable transfer>
<vxe-optgroup label="选项2" disabled>
<vxe-option value="2-1" label="选项2-1"></vxe-option>
<vxe-option value="2-2" label="选项2-2"></vxe-option>
<vxe-option value="2-3" label="选项2-3"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项3">
<vxe-option value="3-1" label="选项3-1" disabled></vxe-option>
<vxe-option value="3-2" label="选项3-2"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项4">
<vxe-option value="4-1" label="选项4-1"></vxe-option>
<vxe-option value="4-2" label="选项4-2"></vxe-option>
<vxe-option value="4-3" label="选项4-3"></vxe-option>
<vxe-option value="4-4" label="选项4-4"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项5">
<vxe-option value="5-1" label="选项5-1"></vxe-option>
<vxe-option value="5-2" label="选项5-2"></vxe-option>
<vxe-option value="5-3" label="选项5-3"></vxe-option>
<vxe-option value="5-4" label="选项5-4"></vxe-option>
</vxe-optgroup>
</vxe-select>
<vxe-select v-model="demo1.value33" placeholder="多选" multiple>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value34" placeholder="多选可清除" multiple clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5"></vxe-option>
<vxe-option value="6" label="选项6"></vxe-option>
<vxe-option value="7" label="选项7"></vxe-option>
<vxe-option value="8" label="选项8"></vxe-option>
<vxe-option value="9" label="选项9"></vxe-option>
<vxe-option value="10" label="选项10"></vxe-option>
<vxe-option value="11" label="选项11"></vxe-option>
<vxe-option value="12" label="选项12"></vxe-option>
<vxe-option value="13" label="选项13"></vxe-option>
<vxe-option value="14" label="选项14"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value36" placeholder="多选限制数量" :max="3" multiple clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5"></vxe-option>
<vxe-option value="6" label="选项6"></vxe-option>
<vxe-option value="7" label="选项7"></vxe-option>
<vxe-option value="8" label="选项8"></vxe-option>
<vxe-option value="9" label="选项9"></vxe-option>
<vxe-option value="10" label="选项10"></vxe-option>
<vxe-option value="11" label="选项11"></vxe-option>
<vxe-option value="12" label="选项12"></vxe-option>
<vxe-option value="13" label="选项13"></vxe-option>
<vxe-option value="14" label="选项14"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value35" placeholder="自定义模板" clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3">
<template #default="{ option }">
<span style="color: red">
<i class="fa fa-plane"></i>
<span>{{ option.label }}</span>
</span>
</template>
</vxe-option>
<vxe-option value="4" label="选项4">
<template #default>
<span style="color: green">
<i class="fa fa-area-chart"></i>
<span>选项4</span>
</span>
</template>
</vxe-option>
<vxe-option value="5" label="选项5">
<template #default="{ option }">
<span>
<span>{{ option.label }}</span>
<i class="fa fa-angellist"></i>
</span>
</template>
</vxe-option>
<vxe-option value="6" label="选项6"></vxe-option>
</vxe-select>
</p>
<p>
<vxe-select v-model="demo1.value45" placeholder="加载中" :options="demo1.list45" loading></vxe-select>
<vxe-select v-model="demo1.value40" placeholder="空数据" :options="demo1.list40"></vxe-select>
<vxe-select v-model="demo1.value41" placeholder="分组配置式" :option-groups="demo1.list41"></vxe-select>
<vxe-select v-model="demo1.value42" placeholder="禁用选项" :options="demo1.list42"></vxe-select>
<vxe-select v-model="demo1.value43" placeholder="禁用分组" :option-groups="demo1.list43" transfer></vxe-select>
<vxe-select v-model="demo1.value44" placeholder="多选" :options="demo1.list44" multiple clearable transfer></vxe-select>
<vxe-select v-model="demo1.value46" placeholder="自定义模板" :options="demo1.list46" multiple clearable transfer>
<template #opt3="{ option }">
<span style="color: red">
<i class="fa fa-plane"></i>
<span>{{ option.label }}</span>
</span>
</template>
<template #opt4="{ option }">
<span style="color: green">
<i class="fa fa-area-chart"></i>
<span>{{ option.label }}</span>
</span>
</template>
<template #opt5="{ option }">
<span>
<span>{{ option.label }}</span>
<i class="fa fa-angellist"></i>
</span>
</template>
</vxe-select>
</p>
<pre>
<pre-code>
| Tab | 切换到上一个 |
| Shift Tab | 切换到下一个 |
| Arrow Up ↑ | 展开下拉面板、如果已展开则移动到上一个选项 |
| Arrow Down ↓ | 展开下拉面板、如果已展开则移动到下一个选项 |
| Enter | 如果未选择值，则展开下拉面板；如果已展开下拉面板，则选中选项 |
| Esc | 关闭下拉面板 |
</pre-code>
</pre>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<pre-code class="html">{{ demoCodes[0] }}</pre-code>
<pre-code class="typescript">{{ demoCodes[1] }}</pre-code>
</pre>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup () {
const demo1 = reactive({
value10: 12,
value11: null,
value12: null,
value13: null,
value20: null,
value21: null,
value22: null,
value23: null,
value24: null,
list24: [
{ value: 11, label: '111' },
{ value: 22, label: '131' },
{ value: 33, label: '561' },
{ value: 44, label: '467' }
],
value30: null,
value31: null,
value32: null,
value33: null,
value34: ['9', '11'],
value35: null,
value36: null,
value40: null,
list40: [],
value41: null,
list41: [
{
label: '组1',
options: [
{ label: '1-1', value: '11' },
{ label: '1-2', value: '10' }
]
},
{
label: '组2',
options: [
{ label: '2-1', value: '21' },
{ label: '2-2', value: '22' }
]
}
],
value42: null,
list42: [
{ label: '1111', value: '1', disabled: true },
{ label: '2222', value: '2', disabled: false },
{ label: '3333', value: '3', disabled: false },
{ label: '4444', value: '4', disabled: false },
{ label: '5555', value: '5', disabled: true },
{ label: '6666', value: '6', disabled: true },
{ label: '7777', value: '7', disabled: false },
{ label: '8888', value: '8', disabled: false },
{ label: '9999', value: '9', disabled: false },
{ label: '1010', value: '10', disabled: false },
{ label: '1111', value: '11', disabled: false }
],
value43: null,
list43: [
{
label: '组1',
disabled: true,
options: [
{ label: '1-1', value: '11', disabled: false },
{ label: '1-2', value: '10', disabled: false }
]
},
{
label: '组2',
disabled: false,
options: [
{ label: '2-1', value: '21', disabled: true },
{ label: '2-2', value: '22', disabled: false }
]
},
{
label: '组3',
disabled: false,
options: [
{ label: '3-1', value: '31', disabled: false },
{ label: '3-2', value: '32', disabled: false }
]
}
],
value44: ['9', '10'],
list44: [
{ label: '1111', value: '1', disabled: true },
{ label: '2222', value: '2', disabled: false },
{ label: '3333', value: '3', disabled: false },
{ label: '4444', value: '4', disabled: false },
{ label: '5555', value: '5', disabled: true },
{ label: '6666', value: '6', disabled: true },
{ label: '7777', value: '7', disabled: false },
{ label: '8888', value: '8', disabled: false },
{ label: '9999', value: '9', disabled: false },
{ label: '1010', value: '10', disabled: false },
{ label: '1111', value: '11', disabled: false }
],
value45: null,
list45: [],
value46: [],
list46: [
{ label: '1111', value: '1' },
{ label: '2222', value: '2' },
{ label: '3333', value: '3', slots: { default: 'opt3' } },
{ label: '4444', value: '4', slots: { default: 'opt4' } },
{ label: '5555', value: '5', slots: { default: 'opt5' } },
{ label: '6666', value: '6' }
]
})
const remoteMethod24 = ({ searchValue }: any): Promise<void> => {
return new Promise(resolve => {
const list = [
{ value: 1001, label: 'table' },
{ value: 1002, label: 'grid' },
{ value: 1003, label: 'button' },
{ value: 1004, label: 'toolbar' },
{ value: 1005, label: 'tooltip' },
{ value: 1006, label: 'pager' },
{ value: 1007, label: 'print' },
{ value: 1008, label: 'export' },
{ value: 1009, label: 'import' },
{ value: 1010, label: 'select' },
{ value: 1012, label: 'checkbox' },
{ value: 1013, label: 'group' }
]
setTimeout(() => {
demo1.list24 = list.filter(item => item.label.indexOf(searchValue) > -1)
resolve()
}, 500)
})
}
return {
demo1,
remoteMethod24,
demoCodes: [
`
<p>
<vxe-select v-model="demo1.value10" placeholder="默认尺寸">
<vxe-option v-for="num in 15" :key="num" :value="num" :label="\`选项\${num}\`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value11" placeholder="中等尺寸" size="medium">
<vxe-option v-for="num in 10" :key="num" :value="num" :label="\`选项\${num}\`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value12" placeholder="小型尺寸" size="small">
<vxe-option v-for="num in 10" :key="num" :value="num" :label="\`选项\${num}\`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value13" placeholder="超小尺寸" size="mini">
<vxe-option v-for="num in 10" :key="num" :value="num" :label="\`选项\${num}\`"></vxe-option>
</vxe-select>
</p>
<p>
<vxe-select v-model="demo1.value20" placeholder="请选择" prefix-icon="fa fa-user-o">
<vxe-option v-for="num in 3" :key="num" :value="num" :label="\`选项\${num}\`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value21" placeholder="可清除" clearable>
<vxe-option v-for="num in 5" :key="num" :value="num" :label="\`选项\${num}\`"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value22" placeholder="自定义选项样式" clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2" class-name="red"></vxe-option>
<vxe-option value="3" label="选项3" class-name="green"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5" class-name="red"></vxe-option>
<vxe-option value="6" label="选项6"></vxe-option>
<vxe-option value="7" label="选项7"></vxe-option>
<vxe-option value="8" label="选项8"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value23" placeholder="分组" clearable transfer>
<vxe-optgroup label="选项2">
<vxe-option value="2-1" label="选项2-1"></vxe-option>
<vxe-option value="2-2" label="选项2-2"></vxe-option>
<vxe-option value="2-3" label="选项2-3"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项3">
<vxe-option value="3-1" label="选项3-1"></vxe-option>
<vxe-option value="3-2" label="选项3-2"></vxe-option>
</vxe-optgroup>
</vxe-select>
</p>
<p>
<vxe-select v-model="demo1.value30" placeholder="禁用" disabled>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value31" placeholder="禁用选项" clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2" disabled></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value32" placeholder="禁用分组" clearable transfer>
<vxe-optgroup label="选项2" disabled>
<vxe-option value="2-1" label="选项2-1"></vxe-option>
<vxe-option value="2-2" label="选项2-2"></vxe-option>
<vxe-option value="2-3" label="选项2-3"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项3">
<vxe-option value="3-1" label="选项3-1" disabled></vxe-option>
<vxe-option value="3-2" label="选项3-2"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项4">
<vxe-option value="4-1" label="选项4-1"></vxe-option>
<vxe-option value="4-2" label="选项4-2"></vxe-option>
<vxe-option value="4-3" label="选项4-3"></vxe-option>
<vxe-option value="4-4" label="选项4-4"></vxe-option>
</vxe-optgroup>
<vxe-optgroup label="选项5">
<vxe-option value="5-1" label="选项5-1"></vxe-option>
<vxe-option value="5-2" label="选项5-2"></vxe-option>
<vxe-option value="5-3" label="选项5-3"></vxe-option>
<vxe-option value="5-4" label="选项5-4"></vxe-option>
</vxe-optgroup>
</vxe-select>
<vxe-select v-model="demo1.value33" placeholder="多选" multiple>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5"></vxe-option>
</vxe-select>
<vxe-select v-model="demo1.value34" placeholder="多选可清除" multiple clearable>
<vxe-option value="1" label="选项1"></vxe-option>
<vxe-option value="2" label="选项2"></vxe-option>
<vxe-option value="3" label="选项3"></vxe-option>
<vxe-option value="4" label="选项4"></vxe-option>
<vxe-option value="5" label="选项5"></vxe-option>
<vxe-option value="6" label="选项6"></vxe-option>
<vxe-option value="7" label="选项7"></vxe-option>
<vxe-option value="8" label="选项8"></vxe-option>
<vxe-option value="9" label="选项9"></vxe-option>
<vxe-option value="10" label="选项10"></vxe-option>
<vxe-option value="11" label="选项11"></vxe-option>
<vxe-option value="12" label="选项12"></vxe-option>
<vxe-option value="13" label="选项13"></vxe-option>
<vxe-option value="14" label="选项14"></vxe-option>
</vxe-select>
</p>
<p>
<vxe-select v-model="demo1.value45" placeholder="加载中" :options="demo1.list45" loading></vxe-select>
<vxe-select v-model="demo1.value40" placeholder="空数据" :options="demo1.list40"></vxe-select>
<vxe-select v-model="demo1.value41" placeholder="分组配置式" :option-groups="demo1.list41"></vxe-select>
<vxe-select v-model="demo1.value42" placeholder="禁用选项" :options="demo1.list42"></vxe-select>
<vxe-select v-model="demo1.value43" placeholder="禁用分组" :option-groups="demo1.list43" transfer></vxe-select>
<vxe-select v-model="demo1.value44" placeholder="多选" :options="demo1.list44" multiple clearable transfer></vxe-select>
</p>
`,
`
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup () {
const demo1 = reactive({
value10: 12,
value11: null,
value12: null,
value13: null,
value20: null,
value21: null,
value22: null,
value23: null,
value30: null,
value31: null,
value32: null,
value33: null,
value34: ['9', '11'],
value40: null,
list40: [],
value41: null,
list41: [
{
label: '组1',
options: [
{ label: '1-1', value: '11' },
{ label: '1-2', value: '10' }
]
},
{
label: '组2',
options: [
{ label: '2-1', value: '21' },
{ label: '2-2', value: '22' }
]
}
],
value42: null,
list42: [
{ label: '1111', value: '1', disabled: true },
{ label: '2222', value: '2', disabled: false },
{ label: '3333', value: '3', disabled: false },
{ label: '4444', value: '4', disabled: false },
{ label: '5555', value: '5', disabled: true },
{ label: '6666', value: '6', disabled: true },
{ label: '7777', value: '7', disabled: false },
{ label: '8888', value: '8', disabled: false },
{ label: '9999', value: '9', disabled: false },
{ label: '1010', value: '10', disabled: false },
{ label: '1111', value: '11', disabled: false }
],
value43: null,
list43: [
{
label: '组1',
disabled: true,
options: [
{ label: '1-1', value: '11', disabled: false },
{ label: '1-2', value: '10', disabled: false }
]
},
{
label: '组2',
disabled: false,
options: [
{ label: '2-1', value: '21', disabled: true },
{ label: '2-2', value: '22', disabled: false }
]
},
{
label: '组3',
disabled: false,
options: [
{ label: '3-1', value: '31', disabled: false },
{ label: '3-2', value: '32', disabled: false }
]
}
],
value44: ['9', '10'],
list44: [
{ label: '1111', value: '1', disabled: true },
{ label: '2222', value: '2', disabled: false },
{ label: '3333', value: '3', disabled: false },
{ label: '4444', value: '4', disabled: false },
{ label: '5555', value: '5', disabled: true },
{ label: '6666', value: '6', disabled: true },
{ label: '7777', value: '7', disabled: false },
{ label: '8888', value: '8', disabled: false },
{ label: '9999', value: '9', disabled: false },
{ label: '1010', value: '10', disabled: false },
{ label: '1111', value: '11', disabled: false }
],
value45: null,
list45: []
})
return {
demo1
}
}
})
`,
`
.red {
color: red;
}
.green {
color: green;
}
`
]
}
}
})
</script>
Reference in New Issue View Git Blame Copy Permalink