我有很多的Form表单，在Form表单内又有很多的select选择器，这些选择器的下拉列表都是通过后端的接口传回的数据渲染的，如果每一个Select选择器都使用创建一个组件的话，页面的代码冗余量就会很大，开发的成本以及维护的成本也相对高很多，所以有必要进行封装。我一开始是先在网上找这方面的文章发现目前的文章都不太适合我的需求，于是自己想办法封装了一个，在这里分享一下思路及代码。
<!--
component:远程搜索下拉列表
time:2022/12/15
1.placeholder(默认为空数组):占位符
示例：
:placeholder="'Please_enter_customer_ID'"
2.SelectData(必传)：下拉框数据
此处有有一个重要逻辑，原本这个数据是子组件接收源数据在进行处理，但是这样子无法自适应各种数据的字段，所以使用父组件去进行处理，处理完成在传给子组件
示例：
:SelectData="CustomerIDData"
this.CustomerIDData = CustomerID.data.map((item) => {
return {value : item.CustomerID.toString() , label : item.CustomerID.toString()}
})
还有一个点需要注意，这个方法需要转为字符串格式，所以需要toString()
3.multiple(默认为true)：是否多选
示例：
:Ifmultiple=false
4.clearable(默认为false)：是否可清空
注意该属性仅适用于单选
示例：
:Ifmultiple=true
-->
<template>
<div class="RangeSearch">
<el-select
v-model="employeesData.transshipmentdepot"
filterable
remote
reserve-keyword
:multiple=Ifmultiple
:clearable=Isclearable
:placeholder="$t(placeholder)"
:remote-method="transshipmentdepotremoteMethod"
:focus="transshipmentdepotremoteMethod"
:loading="loading"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data(){
return{
options: [],
value: [],
list: [],
loading: false,
employeesData:{
transshipmentdepot:'',
},
data:[], //暂存下拉数据，用于当输入为空时显示
multipleSelection:'', //是否多选
}
},
props:{
placeholder:{
default(){
return [];
}
},
SelectData:{
default(){
return [];
}
},
Ifmultiple:{
type: Boolean,
default: true
},
Isclearable:{
type: Boolean,
default: false
},
},
methods:{
transshipmentdepotremoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = this.data
}
}
},
mounted(){
},
watch:{
SelectData:function(newVal){
this.options = newVal
this.data = newVal
this.list = newVal
}
},
}
</script>
<style>
</style>
为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性。
filterable：是否为可搜索 remote：是否为可远程搜索 reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 multiple：是否多选 clearable：是否可以清空选项 placeholder：占位符 remote-method：远程搜索方法 focus：当 input 获得焦点时触发 loading：是否正在从远程获取数据以上这些是官方文档说明的我就不详细讲解了，主要讲讲我这里的封装思路
placeholder：占位符 我这里是"$t(placeholder)"，因为我用的是中英切换的语法，可以直接"placeholder"）
SelectData:下拉框数据 这个数据是必传的，这里的SelectData代表已经处理好的数据直接渲染在下拉列表中，简单的说就是我们需要渲染的数据，至于源数据如何变成我们需要渲染的数据这个操作是在调用这个组件的时候（父组件）中完成的，这里只渲染数据而不是处理数据在渲染数据。 为什么要这样子做，因为很多地方可能会用到，他们的源数据是不一样的，然后需要渲染的字段也不一样，比如说我这里渲染客户IDitem.CustomerID,然后在其他地方我可能要渲染仓库IDitem.WarehouseID,这样子的话如果让组件来处理源数据。 在return的时候item.CustomerID.toString()，item.CustomerID.toString()这里就会出现问题，因为CustomerID是我客户ID渲染时需要的ID字段名，那我要渲染仓库的时候需要WarehouseID就无法自适应到了，也就是说这里的item.CustomerID.toString()是写死的，因为完全不知道源数据的字段是什么，如果我们在调用组件时直接处理好源数据，传过来都是统一格式的数据，全部使用统一的字段遍可以达到使用的目的，但是这样的话使用成本会稍微高点，但是我目前也想不到更加好的实现方法，后续如果有更好的实现方法还会在分享出来。 这里拿到SelectData之后用watch监听器去监听数据变化，将最新传入的数据赋值给组件 options ：下拉列表数据 data：这个data是我自己创建的，目的是一开始点击或者当输入为空时，Element的做法是将options赋值为空，但是我想要在为空时展示所有的数据，所有这里创建了一个data，当输入的数据为空时则将data传给options,就达到了我想要的目的。 list:处理好的下拉列表数据
<template>
<div>
<RangeSearch
:placeholder="'Please_enter_User_Stock'"
:SelectData="this.warehouseData"
:multiple=false
:clearable=false
></RangeSearch>
</div>
</template>
<script>
import RangeSearch from '@/components/RangeSearch.vue'
mounted(){
this.warehouseData = warehouse.data.map((item) => {
return {value : item.StockID , label : item.Name}
})
}
</script>
//使用示例：
:placeholder="'Please_enter_customer_ID'"
因为使用组件需求的不同，其占位符也不同，通过在页面中使用时将placeholder传入拿到数据，这样子就可以做到同一个组件不同占位符。
//使用示例：
:SelectData="CustomerIDData"
this.CustomerIDData = CustomerID.data.map((item) => {
return {value : item.CustomerID.toString() , label : item.CustomerID.toString()}
})
此处有有一个重要逻辑，原本这个数据是子组件接收源数据在进行处理，但是这样子无法自适应各种数据的字段，所以使用父组件去进行处理，处理完成在传给子组件
这里还有一个点需要注意为什么要toString()一下，因为element组件的原因只支持字符转的格式，当传入的未数组以及对象时则会出错，所以这里建议toSring()一下。
this.CustomerIDData：需要渲染的数据
CustomerID.data：源数据
:SelectData="CustomerIDData"：注意放这个的位置是在使用这个组件的地方写的，剩下的是在父组件的生命周期函数mounted中写的。
//使用示例：
:Ifmultiple=false
这个很简单理解就是是否为多选（True：是，False：否）
//使用示例：
:Ifmultiple=tr
这个也很好理解就是是否为可清空（True：是，False：否）
但是需要注意该属性仅适用于单选
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).
寻找有用的ruby的好网站是什么？ 最佳答案 AgileWebDevelopment列出插件(虽然不是rubygems，我不确定为什么)，并允许人们对它们进行评级。RubyToolbox按类别列出gem并比较它们的受欢迎程度。Rubygems有一个搜索框。StackOverflow对最有用的rails插件和rubygems有疑问。 关于ruby-如何搜索有用的ruby，我们在StackOverflow上找到一个类似的问题： https://stacko
我有很多这样的文档:foo_1foo_2foo_3bar_1foo_4...我想通过获取foo_[X]的所有实例并将它们中的每一个替换为foo_[X+1]来转换它们。在这个例子中:foo_2foo_3foo_4bar_1foo_5...我可以用gsub和一个block来做到这一点吗？如果不是，最干净的方法是什么？我真的在寻找一个优雅的解决方案，因为我总是可以暴力破解它，但我觉得有一些正则表达式技巧值得学习。 最佳答案 我(完全)不懂Ruby，但类似这样的东西应该可以工作:"foo_1foo_2".gsub(/(foo_)(\d+)/
我读了"BingSearchAPI-QuickStart"但我不知道如何在Ruby中发出这个http请求(Weary)如何在Ruby中翻译“Stream_context_create()”？这是什么意思？"BingSearchAPI-QuickStart"我想使用RubySDK，但我发现那些已被弃用前(Rbing)https://github.com/mikedemers/rbing您知道Bing搜索API的最新包装器(仅限Web的结果)吗？ 最佳答案 好吧，经过一个小时的挫折，我想出了一个办法来做到这一点。这段代码很糟糕，因为它是
我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/
给定一个元素和一个数组，Ruby#index方法返回元素在数组中的位置。我使用二进制搜索实现了我自己的索引方法，期望我的方法会优于内置方法。令我惊讶的是，内置的在实验中的运行速度大约是我的三倍。有Rubyist知道原因吗？ 最佳答案 内置#indexisnotabinarysearch，这只是一个简单的迭代搜索。但是，它是用C而不是Ruby实现的，因此自然可以快几个数量级。 关于Ruby#index方法VS二进制搜索，我们在StackOverflow上找到一个类似的问题：