目录
- 前言
- 1. 基本知识
- 2. Demo
前言
最近使用这个插件，后续想要加入一个模糊搜索，常规方式@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>
- 用于选择一个或多个项目，常见于选择员工、产品、类别等列表
- 支持模糊搜索，用户可以快速筛选出所需项，特别是在数据量较大的情况下
- 支持多选和单选两种模式，能够满足多种需求
这个插件好在于，只需要添加一个属性，即可模糊搜索！其他的属性同理，不过如果组件没有自带的，需要自身拓展
