英文手表网站_高端网站优化_醴陵网站制作_国外独立站网站

前言

最近使用这个插件，后续想要加入一个模糊搜索，常规方式@search等都不行，后续经过一番摸索，也是添加成功：

以下文章主要是做一个学习以及分享，官方链接如下：zhilin-picker

1. 基本知识

zhilin-picker 是一个自定义的选择器组件，通常用于弹出一个选择列表供用户选择选项。支持多种功能，如多选、搜索和自定义标题等

最主要是记住他的常用属性：

属性名	类型	必填	默认值	说明
v-model	Boolean	是		控制选择器弹出/隐藏
data	Array/ObjectArray	是		格式：[“五险”,“加班补助”]或者[{label:“五险”,value:“11”}]
title	String	否	“请选择”	选择器的标题
initSelected	Array	否		默认选中项
multiple	Boolean	否	true	是否开启多选模式
showSearch	Boolean	否	false	是否支持列表搜索，开启后默认对列表内进行模糊筛选，若要异步搜索需结合searchInput方法
searchInput	Function	否		搜索的input事件回调，接收搜索框当前value，可用于对列表异步筛选

下面是一个基于实际项目中的核心代码整理出来的示例，帮助其他开发者学习如何使用 zhilin-picker 组件

2. Demo

<template><div><!-- 维修人员选择器 --><u-form-item @click="repareStaffPicker = true" label="维修人员:" labelWidth="200rpx" prop="repareStaffName"><u--input v-model="formModel.repareStaffName" /></u-form-item><!-- 选择器 --><zhilinPicker v-model="repareStaffPicker"  <!-- 控制选择器弹出/隐藏 -->:data="repareStaffColumn"  <!-- 选择器的数据 -->@confirm="repareStaffConfirm"  <!-- 确认回调 -->showSearch  <!-- 显示搜索框 -->/></div>
</template><script>
export default {data() {return {repareStaffPicker: false,  // 控制选择器的显示与隐藏repareStaffColumn: [],  // 选择器的数据formModel: {repareStaffName: '',  // 维修人员名称repareStaff: '',  // 维修人员ID},deptId: 'someDeptId',  // 部门ID}},methods: {onLoad(option) {// 假设这里是异步获取数据selectBydeptId({deptId: this.deptId,tenantId: '000000'}).then(res => {const data = res.data.data;this.repareStaffColumn = data.map(i => ({label: i.name,  // 显示名称value: i.id     // 选中的值}));this.setCheckRules();  // 设置表单验证规则});},repareStaffConfirm(e) {console.log(e);  // 确认回调，打印选中的项let label = [];let value = [];for (let i of e) {label.push(i.label);value.push(i.value);}// 使用 `|` 拼接多个选中的标签this.formModel.repareStaffName = label.join('|');this.formModel.repareStaff = value.join(',');},setCheckRules() {this.$refs.form.setRules({repareStaffName: [{type: 'string',required: true,multiple: true,message: '维修人员不能为空',trigger: ['blur', 'change'],}, {validator: (rule, value, callback) => {this.$refs.collapse.init();if (value.length === 0) {callback(new Error('维修人员不能为空'));} else {callback();  // 验证通过}},message: '维修人员不能为空',trigger: ['blur', 'change'],}],});}},mounted() {this.onLoad();  // 加载数据}
}
</script>

• 用于选择一个或多个项目，常见于选择员工、产品、类别等列表
• 支持模糊搜索，用户可以快速筛选出所需项，特别是在数据量较大的情况下
• 支持多选和单选两种模式，能够满足多种需求

这个插件好在于，只需要添加一个属性，即可模糊搜索！其他的属性同理，不过如果组件没有自带的，需要自身拓展