在odoo中使用vue及element

为什么要在odoo中使用vue？

主要是因为目前odoo中的owl框架的生态组件太少，没有相关的组件和odoo本身组件更偏向于国外的 *** 作习惯，

且使用vue，能加快小型企业前端开发的上手度，以下是我对odoo中使用vue的一次尝试，希望和大家互相学习印证。

步骤如下 1，创建自己的模块

创建一个自己的模块，我这里是xc_addons

在view目录下，创加templates.xml引入下载好的vue.js和element-ui的框架js和css

vue.js和element-ui的文件需要另行下载，可以私信我们，领取压缩包哈~

2，在项目的/static/src/下放入相关js和css文件

3，创建一个qweb的xml文件

    

        

            ces1

            默认按钮

            {{projectName}}

            

                {{item}}

            

            





            

            

                {{radio}}

            



            

                

                    

                    

                    

                    

                    

                    

                

            

            

                

                    

                    

                    

                        

                        

                        

                            

                            

                            

                            

                            

                            

                            

                            

                        

                    

                

            





        

    

4，在创建渲染及事件的js（vueDemo.js）

代码如下，我这里是一单页面tag标签页为讲解，暂不涉及odoo原生页面，组件中使用vue，

// 自定义页面实际上是一个 client action，也就是客户端动作，通过对 AbstractAction 这个抽象类进行扩展，

// 从而指定自定义页面的模板和页面的事件等

odoo.define('vue_table_view', function (require) {

  "use strict";





  var AbstractAction = require('web.AbstractAction');

  var core = require('web.core');

  const { action_registry, qweb } = require('web.core');



  var PageDemo = AbstractAction.extend({

    // 关联xml组件

    template: 'vue_demo_view',

    start() {

      $(document).ready(() => {

        new Vue({

          el: '#vueApp',

          data: {

            loading: false,

            showTabResult: true,//是否展示

            quotNo: '0PTchenrunping2104121434498811',//

            tableData: [{

              date: '2016-05-03',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }, {

              date: '2016-05-02',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }, {

              date: '2016-05-04',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }, {

              date: '2016-05-01',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }, {

              date: '2016-05-08',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }, {

              date: '2016-05-06',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }, {

              date: '2016-05-07',

              name: '王小虎',

              province: '上海',

              city: '普陀区',

              address: '上海市普陀区金沙江路 1518 弄',

              zip: 200333

            }],//表格数据

            resultExpand: true,

            //表单高度，固定表头用

            tableHeight: window.innerHeight - 195,

            projectName: 'aaaaa',//项目名称

            radio: 3,



          },

          mounted() {

            console.log('vue')

            // $('.butclick').on('click',this.aa);

          },

          methods: {

            aa() {

              this.showTabResult = !this.showTabResult;

            }

          },

        })

      })



    }



  });



  // add方法对动作进行注册，第一个参数表示注册的动作名，第二个参数是要注册的动作对象；

  core.action_registry.add('vue_table_view', PageDemo);



  return PageDemo;



});

5，在__manifest__.py文件中引入创建的qweb的xml文件

'qweb': [

        'static/src/xml/xc_vue_demo.xml',

    ],

6，在菜单文件中，编写菜单

这里是创建一个菜单入口方便进入vue的项目

7，在action文件中关联菜单及tag

这里的tag需要和js中add的tag名字一致

     

            vue测试

            vue_table_view

     

8，重启项目 运行，点击菜单（记得升级项目）

完成后点击vue测试，菜单，进入单页面项目，可以看到element的组件是可以在页面中使用，并且我这里对vue的v-model，标签中{{ message }}

本期内容到此结束啦，如有疑问，欢迎讨论！

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。

公众号搜索神州数码云基地，后台回复Odoo，加入Odoo技术交流群。