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