✨(component): cascader组件优化change回调参数
This commit is contained in:
parent
02f27278e7
commit
237f4fd508
@ -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();
|
||||||
|
@ -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> /* evt.display<br> /* evt.value,<br> /* evt.label<br> /* evt.currentClick<br>}|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user