el-cascader自定义搜索自定义节点内容

最新推荐文章于 2024-07-13 19:17:02 发布

曲小强

最新推荐文章于 2024-07-13 19:17:02 发布

阅读量1.4k

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/quhongqiang/article/details/130966109

版权

文章展示了如何在Vue项目中使用el-cascader组件实现可过滤的级联选择器，自定义节点内容包括优惠券的详细信息，并提供了filter-method的实现来过滤搜索结果。通过这个组件，用户可以搜索券名称或ID，并查看每个优惠券的详细属性如类型、面额、有效期等。

摘要由CSDN通过智能技术生成

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
    }
}