目前,项目中使用了纯前端的静态项目+RESTFul接口的模式。为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如
vue-route
等功能,也未使用webpack
等编译功能,所以,也没有使用.vue
文件功能。这时候,如果用到控件,则多数从原jquery的组件中选择。
select下拉搜索选择
这次的需求调研与设计是原来做winform开发的同事,由于用惯了devexpress
这个控件库,所以,对于searchlookupeditor
这个控件情有独钟,所以,在设计的时候,许多地方都用到。
最初实现
最初,我使用了select2绑定select
标签,设定其change事件 ,在事件中修改对应的vue的data值,同时,在vue中设定watch``data
中被绑定的属性,属性值发生变化,则修改对应的dom
的val,然后再触发select2的change事件。当然,这种对应关系,我在select
标签上放了一个data-vuep来保存其与vue属性的对应关系,并放在全局的select2vue
和dom2vue
中。
//mounted中的部分代码
select2vue = {};
$("select").each(function (index, item) {
var s2 = $(item).select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
theme: "classic",
placeholder: "请选择"
}).on("change", function (e) {
console.log(e);
var v = $(e.target).val();
var p = $(e.target).attr("data-vuep");
eval("vue_cust_busi." + p + "='" + v + "';");
//$(e.target).find("option").attr("selected",false)