FineUI + Vue 实现数据绑定

棕榈

FineUI + Vue 实现数据绑定





Elment 与 FineUI 控件间的数据绑定






FineUI组件与Element组件结合使用



    在这之前使用 Knockout 实现了 FineUI 数据绑定，今天讨论一下如果通过 Vue 来实现数据绑定，Vue 与 Knockout 有很多类似之处，Vue 更现代，语法更简洁，但 Vue 需要 IE9+ 支持，而 Knockout 可以支持到 IE6。虽然 Knockout 4 也实现了 VirtualDOM、生命周期及不再支持旧版 IE，但到现在为止也没有发布正式版。

   由于 Vue 采用 VirtualDOM 进行渲染的，所以它与 Knockout 在进行 FineUI 封装时还有很大的不同，Knockout 在是FineUI 渲染完后，再进行数据的绑定，由于 Knockout 不会对原有的 DOM 进行改变，所以 FineUI 的事件绑定还会保留，但 Vue 却不一样了，它会对挂载点下的 DOM 进行重新创建，这样 FineUI 之前进行的事件绑定就不会存在了。

   为了防止 FineUI 渲染后的 DOM 不被 Vue 重新渲染，需要将挂载点 与 FineUI 的 DOM 隔离开来，再通过控件的 ContentEl 属性对其进行引用，这样做也有一些缺点，如果根节点进行了重新渲染，之前引用的节点也不存在了，这个是需要注意的地方。

   FineUI 的 DOM 不被 Vue 渲染，这样也没法使用 Vue 的模板语法进行数据绑定，我是通过自定义一个模板语法，格式为JSON，这样方便解析，然后再通过 Vue 的 $watch 进行数据监控，变相的实现了数据绑定。

    虽然 FineUI 创建完的 DOM 无法直接使用在 Vue 中，但基于 Vue 的组件封装出来的FineUI控件将不再有前面的限制，使用方式与普通的Vue组件也没有区别，但这样使用无法发挥 FineUI 的布局功能，同时有些控件的样式还需要单独的调整。

1.     <f:Panel Layout="Anchor" Title="element ui 文本框" Width="350" BodyPadding="20">
   
2.         <Items>
   
3.             <f:Control CssStyle="margin-bottom:20px">
   
4.                 <el-input placeholder="请输入内容" size="medium" prefix-icon="el-icon-search" v-model="input"></el-input>
   
5.             </f:Control>
   
6.             <f:TextBox AttributeDataTag="{value:'this.input', change:'this.input=control.getValue()'}"></f:TextBox>
   
7.         </Items>
   
8.     </f:Panel>

复制代码

上面的代码实现了，Element 文本框与 FineUI 文本框的数据双向绑定

1. <el-table-column label="名称">
   
2.         <template slot-scope="scope">
   
3.                 <fineui :o="{type:'dropdownlist',style:'margin-bottom:0px',data:goodsNames,value:scope.row.name}"></fineui>
   
4.         </template>
   
5. </el-table-column>
   
6. <el-table-column label="单位">
   
7.         <template slot-scope="scope">
   
8.                 <el-select v-model="scope.row.unit" size="small">
   
9.                         <el-option v-for="item in goodsUnits" :key="item[0]" :label="item[1]" :value="item[0]"></el-option>
   
10.                 </el-select>
    
11.         </template>
    
12. </el-table-column>

复制代码

上面的代码是封装后的 FineUI 组件与 Element 组件结合在一起使用

Elwin

不错呀。。。。。。