vue+iview表格中如何自定义组件

春节前，项目突然停了，闲来无事，想着写点博客打发一下时间。

如图，iview表格中要自定义样式，因此需要引入一个自定义组件，楼主使用的requireJs的框架，使用nodeJs的话，用import引入

define(function (require) {

    "use strict";

    // Vue实例引入

    var util = require('util');

    var Vue = util.getVue('iview');

    var opinionTag = require('/views/modules/public-opinion-list/opinion-tag/opinion-tag.js')

    // 导出Vue实例

    return Vue.extend({

        name: 'public-opinion-list',

        template: require('text!/views/modules/public-opinion-list/public-opinion-list.vue'),

        data: function () {

            var _this = this;

            return {

         table: {

                    columns: [

                        {

                            title: '情感倾向',

                            key: 'mark',

                            minWidth: 100,

                            align: 'center',

                            ellipsis: true,

                            tooltip: true,

                            render: function (h, params) {

                                var type = ""

                                var text = ""

                                switch (params.row.mark) {

                                    case 1:

                                        type = "warning"

                                        text = "中性"

                                        break;

                                    case 2:

                                        type = "info"

                                        text = "正面"

                                        break;

                                    case 0:

                                        type = "error",

                                            text = "负面"

                                        break;

                                    default:

                                        type = "info",

                                        text = "其他"

                                        break;

                                }

                                return h('div', {}, [

                                    h('Button', {

                                        props: {

                                            type: type,

                                            size: 'small',

                                            ghost: true

                                        },

                                        style: {},

                                        on: {

 

                                        }

                                    }, text),

 

                                ])

                            }

                        },

                         {

                            title: '标题及摘要',

                            key: 'templateTitle',

                            minWidth: 400,

                            align: 'left',

                            ellipsis: true,

                            render: (h, params) => {

                                return h('div', {}, [

                                    h(opinionTag, {

                                        props: {

                                            params: params.row

                                        }

                                    }),

                                ])

                            }

                        },

                   ],

                    data: [],

                    current: 1,

                    pageSize: 10,

                    total: 0,

                    loading: false

                },

            }

        },

        computed: {

        },

        watch: {

        },

        mounted: function () {

        },

        methods: {

        },

    });

});