✨(component): ✨(component): cascader 增加 allow-clear 用于清空
This commit is contained in:
0o张不歪o0
parent
6ffd6ce6de
commit
eeeeb84aa6
@ -1,48 +1,24 @@
|
||||
<template>
|
||||
<lay-dropdown
|
||||
class="layui-cascader"
|
||||
ref="dropdownRef"
|
||||
:autoFitMinWidth="false"
|
||||
:updateAtScroll="true"
|
||||
>
|
||||
<lay-input
|
||||
v-model="displayValue"
|
||||
readonly
|
||||
suffix-icon="layui-icon-down"
|
||||
:placeholder="placeholder"
|
||||
v-if="!slots.default"
|
||||
></lay-input>
|
||||
<lay-dropdown class="layui-cascader" ref="dropdownRef" :autoFitMinWidth="false" :updateAtScroll="true"
|
||||
:disabled="dropDownDisabled">
|
||||
<lay-input v-model="displayValue" readonly suffix-icon="layui-icon-down" :placeholder="placeholder"
|
||||
v-if="!slots.default" :allow-clear="allowClear" @clear="onClear"></lay-input>
|
||||
<slot v-else></slot>
|
||||
|
||||
<template #content>
|
||||
<div class="layui-cascader-panel">
|
||||
<template v-for="(itemCol, index) in treeData">
|
||||
<lay-scroll
|
||||
height="180px"
|
||||
class="layui-cascader-menu"
|
||||
:key="'cascader-menu' + index"
|
||||
v-if="itemCol.data.length"
|
||||
>
|
||||
<div
|
||||
class="layui-cascader-menu-item"
|
||||
v-for="(item, i) in itemCol.data"
|
||||
:key="index + i"
|
||||
@click="selectBar(item, i, index)"
|
||||
:class="[
|
||||
<lay-scroll height="180px" class="layui-cascader-menu" :key="'cascader-menu' + index"
|
||||
v-if="itemCol.data.length">
|
||||
<div class="layui-cascader-menu-item" v-for="(item, i) in itemCol.data" :key="index + i"
|
||||
@click="selectBar(item, i, index)" :class="[
|
||||
{
|
||||
'layui-cascader-selected': itemCol.selectIndex === i,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<slot
|
||||
:name="item.slot"
|
||||
v-if="item.slot && slots[item.slot]"
|
||||
></slot>
|
||||
]">
|
||||
<slot :name="item.slot" v-if="item.slot && slots[item.slot]"></slot>
|
||||
<template v-else>{{ item.label }}</template>
|
||||
<i
|
||||
class="layui-icon layui-icon-right"
|
||||
v-if="item.children && item.children.length"
|
||||
></i>
|
||||
<i class="layui-icon layui-icon-right" v-if="item.children && item.children.length"></i>
|
||||
</div>
|
||||
</lay-scroll>
|
||||
</template>
|
||||
@ -70,6 +46,7 @@ export interface LayCascaderProps {
|
||||
placeholder?: string;
|
||||
onlyLastLevel?: boolean;
|
||||
replaceFields?: { label: string; value: string; children: string };
|
||||
allowClear?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<LayCascaderProps>(), {
|
||||
options: null,
|
||||
@ -77,6 +54,7 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
|
||||
decollator: "/",
|
||||
placeholder: "",
|
||||
onlyLastLevel: false,
|
||||
allowClear: false,
|
||||
replaceFields: () => {
|
||||
return {
|
||||
label: "label",
|
||||
@ -247,5 +225,24 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
|
||||
|
||||
const displayValue = ref<string | number | null>(null);
|
||||
const slots = useSlots();
|
||||
const dropdownRef = ref(null);
|
||||
const dropdownRef = ref();
|
||||
const dropDownDisabled = ref(false);
|
||||
|
||||
//清除事件
|
||||
const onClear = () => {
|
||||
dropDownDisabled.value=true;
|
||||
let arr = JSON.parse(JSON.stringify(treeData.value));
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
arr[index].selectIndex = null;
|
||||
if (index === 0) {
|
||||
continue;
|
||||
}
|
||||
arr[index].data = [];
|
||||
}
|
||||
treeData.value = arr;
|
||||
emit("update:modelValue", null);
|
||||
setTimeout(() => {
|
||||
dropDownDisabled.value=false;
|
||||
}, 0);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
::: demo 使用 `lay-cascader` 标签创建级联选择器
|
||||
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px">
|
||||
<lay-cascader :options="options" v-model="value" placeholder="点我试一试" allow-clear style="width:250px">
|
||||
</lay-cascader>
|
||||
<span style="margin-left:20px">输出的值：{{value}}</span>
|
||||
</template>
|
||||
@ -297,7 +297,7 @@ const options = [
|
||||
:::
|
||||
::: demo 使用 `decollator` 属性 自定义分割符号
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
|
||||
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" allow-clear style="width:250px"></lay-cascader>
|
||||
<span style="margin-left:20px">输出的值：{{value1}}</span>
|
||||
</template>
|
||||
|
||||
@ -311,7 +311,7 @@ const value1=ref(null)
|
||||
:::
|
||||
::: demo 使用 `onlyLastLevel` 属性 可以仅在回显的displayValue显示选中项最后一级的标签，而不是完整路径, 注意绑定的v-model仍然是完整的。
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" placeholder="仅显示最后一级" style="width:250px"></lay-cascader>
|
||||
<lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" allow-clear placeholder="仅显示最后一级" style="width:250px"></lay-cascader>
|
||||
<span style="margin-left:20px">输出的值：{{valueLv}}</span>
|
||||
</template>
|
||||
|
||||
@ -698,6 +698,7 @@ const options3=[
|
||||
| options | 选项参数 格式请见上面的demo |
|
||||
| onlyLastLevel | 回显display仅显示最后一级，默认为 `false` |
|
||||
| replaceFields | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例 |
|
||||
| allow-clear | 默认slot提供清空功能，与lay-input保持一致|
|
||||
:::
|
||||
|
||||
::: title Cascader 事件
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
<li>[新增] textarea 组件 change 回调函数。by @Jmysy</li>
|
||||
<li>[新增] textarea 组件 clear 回调函数。by @Jmysy</li>
|
||||
<li>[新增] cascader 组件 replaceFields属性 用于自义定字段。by @SmallWai</li>
|
||||
<li>[新增] cascader 组件 allow-clear属性 用于清空默认slot中的值。by @SmallWai</li>
|
||||
<li>[优化] cascader 组件 change 回调函数。 by @SmallWai</li>
|
||||
<li>[删除] input 组件 value 属性, 与 v-model 属性冲突。by @Jmysy</li>
|
||||
</ul>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user