(component): cascader组件优化change回调参数

This commit is contained in:
0o张不歪o0 2022-07-08 09:36:38 +08:00
parent 02f27278e7
commit 237f4fd508
3 changed files with 37 additions and 52 deletions

View File

@ -1,48 +1,23 @@
<template> <template>
<lay-dropdown <lay-dropdown class="layui-cascader" ref="dropdownRef" :autoFitMinWidth="false" :updateAtScroll="true">
class="layui-cascader" <lay-input v-model="displayValue" readonly suffix-icon="layui-icon-down" :placeholder="placeholder"
ref="dropdownRef" v-if="!slots.default"></lay-input>
:autoFitMinWidth="false"
:updateAtScroll="true"
>
<lay-input
v-model="displayValue"
readonly
suffix-icon="layui-icon-down"
:placeholder="placeholder"
v-if="!slots.default"
></lay-input>
<slot v-else></slot> <slot v-else></slot>
<template #content> <template #content>
<div class="layui-cascader-panel"> <div class="layui-cascader-panel">
<template v-for="(itemCol, index) in treeData"> <template v-for="(itemCol, index) in treeData">
<lay-scroll <lay-scroll height="180px" class="layui-cascader-menu" :key="'cascader-menu' + index"
height="180px" v-if="itemCol.data.length">
class="layui-cascader-menu" <div class="layui-cascader-menu-item" v-for="(item, i) in itemCol.data" :key="index + i"
:key="'cascader-menu' + index" @click="selectBar(item, i, index)" :class="[
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, '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> <template v-else>{{ item.label }}</template>
<i <i class="layui-icon layui-icon-right" v-if="item.children && item.children.length"></i>
class="layui-icon layui-icon-right"
v-if="item.children && item.children.length"
></i>
</div> </div>
</lay-scroll> </lay-scroll>
</template> </template>
@ -139,7 +114,7 @@ function getMaxFloor(treeData: any) {
let max = 0; let max = 0;
function each(data: any, floor: any) { function each(data: any, floor: any) {
data.forEach((e: any) => { data.forEach((e: any) => {
e.floor = floor; //e.layFloor = floor;
if (floor > max) { if (floor > max) {
max = floor; max = floor;
} }
@ -161,6 +136,7 @@ function findData(orginData: any, level: number) {
label: element.label, label: element.label,
slot: element.slot || false, slot: element.slot || false,
children: element.children ?? false, children: element.children ?? false,
orginData:element
}); });
} }
@ -197,25 +173,24 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
} }
} }
extractData(treeData.value, data, 0); extractData(treeData.value, data, 0);
let fullLable = data.map((e: any) => { return e.label; }).join(` ${props.decollator} `);
if (!props.onlyLastLevel) { if (!props.onlyLastLevel) {
displayValue.value = data displayValue.value = fullLable
.map((e: any) => {
return e.label;
})
.join(` ${props.decollator} `);
} else { } else {
let _data = data.map((e: any) => { let _data = data.map((e: any) => {
return e.label; return e.label;
}); });
displayValue.value = _data[_data.length - 1]; displayValue.value = _data[_data.length - 1];
} }
let value = data let value = data.map((e: any) => { return e.value; }).join(props.decollator);
.map((e: any) => {
return e.value;
})
.join(props.decollator);
emit("update:modelValue", value); emit("update:modelValue", value);
emit("change", displayValue.value); let evt = {
display: displayValue.value,
value: value,
label: fullLable,
currentClick: JSON.parse(JSON.stringify(item.orginData))
}
emit("change", evt);
if (dropdownRef.value) if (dropdownRef.value)
// @ts-ignore // @ts-ignore
dropdownRef.value.hide(); dropdownRef.value.hide();

View File

@ -350,8 +350,8 @@ const valueLv=ref(null)
import { ref } from "vue"; import { ref } from "vue";
const value2=ref(null) const value2=ref(null)
const displayValue=ref(null) const displayValue=ref(null)
const onChange=(val)=>{ const onChange=(evt)=>{
displayValue.value=val displayValue.value=evt.display
} }
const options2 = [ const options2 = [
{ {
@ -647,9 +647,9 @@ const options2 = [
::: table ::: table
| 方法名 | 描述 | | 方法名 | 描述 |用法|
| ---- | ------------ | | ---- | ------------ |--------|
| change | 选中后数据改变的回调 | | change | 选中后数据改变的回调 |onChange( evt ){ <br> &nbsp; &nbsp;/* evt.display<br> &nbsp; &nbsp;/* evt.value,<br> &nbsp; &nbsp;/* evt.label<br> &nbsp; &nbsp;/* evt.currentClick<br>}|
::: :::

View File

@ -11,6 +11,16 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="1.2.x"> <lay-timeline-item title="1.2.x">
<ul>
<a name="1-2-8"></a>
<li>
<h3>1.2.8 <span class="layui-badge-rim">2022-07-08</span></h3>
<ul>
<li>[修复] layer 组件 Notify 关闭图标样式问题。 by @SmallWai</li>
<li>[优化] cascader 组件 优化change回调参数 by @SmallWai</li>
</ul>
</li>
</ul>
<ul> <ul>
<a name="1-2-7"></a> <a name="1-2-7"></a>
<li> <li>