el-cascader自定义搜索自定义节点内容
<el-cascader
v-model="ruleForm.goodsName"
:options="data.options"
filterable
:filter-method="dataFilter"
:props="{ multiple: true, label: 'couponName', value: 'couponId', disabled: 'disabled'}"
collapse-tags
collapse-tags-tooltip
clearable
placeholder="输入券名称或ID"
style="width: 400px;"
>
<template #default="{ node, data }">
<el-popover placement="right" :width="360" trigger="hover">
<template #reference>
<span>{{ data.couponName }}/{{ data.couponId }}</span>
</template>
<div>
<div>券名称: {{ data.couponName || '-' }}</div>
<div>券类型: {{ data.compositeType || '-' }}</div>
<div>券面额: {{ data.couponDenomination || '-' }}</div>
<div>券有效期: {{ data.expireTime || '-' }}</div>
<div>使用门槛: {{ data.thresholdlimit == '0' ? '否' : '是' || '-' }}</div>
<div>适用油站: {{ data.mchNames || '-' }}</div>
</div>
</el-popover>
</template>
</el-cascader>
const dataFilter = (node: any, val: any) => {
if (!!~node.value.indexOf(val) || !!~node.label.toUpperCase().indexOf(val.toUpperCase())) {
return true
}
}