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

最新推荐文章于 2025-09-24 12:41:25 发布

原创

最新推荐文章于 2025-09-24 12:41:25 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模

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

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"