使用vue和element组件交互----关联选择查询 (双向绑定)

vue + element-ui(el-select)双向绑定

需求:

 为了方便管理后台的操作,用户一般会有个默认项目.  
 用户可以减少切换页面,每次都都要手动选择项目。 
 同时,查询页面,需要查看别的项目的信息,但是不能影响默认项目
  1. 页面头部有一个默认项目搜索提示框,选择默认项目
  2. 有筛选功能的页面,页面内部还有筛选搜索框。
  3. 用户登陆,自动选择默认项目 (存储在cookie中)
  4. 用户选择默认项目,新打开任何页面,都会选择默认项目
  5. 用户改变默认项目,则该页面搜索项目需要改变。
  6. 单个页面,修改过滤项目,默认项目不变。

整体git地址:https://github.com/destinym/chainedSelect

V0.1版本 (基础版本)

参考element-ui的文档,我们快速做一个搜索选择框。

v0.1.2018-10-28 21_52_37.gif

只有一个主页面

主页面代码:





问题,如果大部分页面都要使用怎么办?
所以,我们必须写成组件的形式,方便重用

V0.2版本 (组件--错误)

我们修改代码为组件代码。看似很简单。
但是却发现一个严重的问题,我们选择的结果和搜索的结果完全不同。

v0.2.2018-10-28 21_54_01.gif

组件代码:





主页面代码





原因是什么?
vue2.0之后 页面和组件内部不支持双向绑定了。
参考:
https://segmentfault.com/a/1190000008662112
https://www.jianshu.com/p/1ebc15645abe

V0.3版本 (组件--错误)

思路
参考了上面文章,大家的基本思路一致

  • 组件使用props属性来project
  • 增加一个变量p_project,使得p_project=project,接收原始数据
  • 组件内部数据变化,p_project发送变化。
  • 监听p_project,通过emit通知父组件
v0.3.2018-10-28 21_55_33.gif

组件代码:





主页代码





发现错误:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "project"

found in

--->  at src/components/LocalSelectV0.3/index.vue
        at src/views/v0.3.vue
          at src/App.vue
           

挫折

看上去很美好,实际使用的时候。发现还是报错。
这句的意思是我们不能修改组件内props的值。但是,我们并没有修改project这个变量,为什么还会报错。

仔细分析后发现,我们使用了el-select组件,它在响应change事件的时候,其实已经修改了props中project的值。 所以我们无论怎么写代码,响应change事件的时候,必然会报错。

V0.4版本 (组件--可运行)

思考+新思路。
山重水复疑无路,柳暗花明又一村。
经过几次尝试,我们整理下思路:

  • 组件内数据修改页面数据,必须通过emit.
  • props的值不能直接修改。

所以,我们还是想使用el-select。那么我们必须使用data来存储project。 同时建立监听器,如果data变化,再通知主页面。

v0.4.2018-10-28 21_56_08.gif

组件代码




主页代码





最难的问题解决了.

V0.5版本(组件--优化)

此时,我们继续做开发,发现有个不爽的地方,就是我们手动输入部分字母,点击搜索或者单击鼠标的时候,希望搜索的为匹配的第一个。

但是这个时候确发现,搜索框又变回了之前的。 为此,我们需要优化blur函数,让失去焦点后,能选择第一个匹配的。

ps:default-first-option只能解决,敲击回车之后选择第一个,不能解决鼠标点击的问题

v0.5.2018-10-28 21_57_12.gif

组件代码:





主页代码:





V0.6版本 (完整版本)

我们希望完成默认项目功能。

  • 增加一个全局组件
  • 要使用cookie存储模式项目,这样下次访问才不会失效。
  • 默认项目要使用vuex存储一份,这样有任何变化的时候,local compent才能监听到,才能发生变化
v0.6.2018-10-28 21_59_59.gif

全局组件代码:







局部组件





主页:




你可能感兴趣的:(使用vue和element组件交互----关联选择查询 (双向绑定))