常用组件例子

var _= require("lodash");
//lodash 需要找资源引入
window._ = _;

Vue.component('expandRow', {
    props: {
        modifyData: Array,
        columns: Array
    },
    template: '<i-table :columns="columns" :data="modifyData"> </i-table>'
});
Vue.component('editCell', {
    props: {
        data: Object,
        name: String
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue, this.name)
        }
    },
    template: '<i-input placeholder="请输入..." v-model="data"></i-input>'
});
Vue.component('inputCell', {
    props: {
        data: Object,
        name: String,
        maxlength: Number,
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue, this.name)
        }
    },
    template: '<i-input placeholder="请输入..." v-model="data" :maxlength="maxlength"></i-input>'
});
Vue.component('textAreaCell', {
    props: {
        data: Object,
        name: String,
        maxlength: Number
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue, this.name)
        }
    },
    template: '<i-input type="textarea" placeholder="请输入..." :autosize="{minRows: 5,maxRows: 8}" v-model="data" :maxlength="maxlength"></i-input>'
});

Vue.component('textAreaCellMkII', {
    props: {
        data: Object,
        name: String,
        maxlength: Number,
        text:{
            type: String,
            default: "请输入..."
        }
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue, this.name)
        }
    },
    template: '<i-input type="textarea" :placeholder="text" :autosize="{minRows: 2,maxRows: 8}" v-model="data" :maxlength="maxlength"></i-input>'
});

Vue.component('selectCell', {
    props: {
        dataList: Array,
        data: Object,
        name: String,
        field: {value: "code", label: "name"}
    },
    computed: {
        list: function () {
            var _this = this;
            return _.map(this.dataList, function (o) {
                o.name = o[_this.field.label];
                o.code = o[_this.field.value];
                return o;
            });
        }
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue, this.name, this)
        }
    },
    methods: {
        clear: function () {
            var _this = this;
            Vue.nextTick(function () {
                _this.data = "";
            });
        }
    },
    template: '<i-select  v-model="data" placeholder="请选择" clearable filterable >'
        + '<i-option v-for="item in list" :value="item.code" :label="item.name"></i-option>'
        + '</i-select>'
});

Vue.component('datepickerCell', {
    props: {
        data: Object
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue)
        }
    },
    template: '<Date-picker type="date"  placeholder="请选择" v-model="data"></Date-picker>'
});

Vue.component('rateCell', {
    props: {
        data: Object,
        disabled: false
    },
    //props:['data','disabled'],
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue)
        }
    },
    template: '<div><Rate v-model="data" v-if="!disabled"></Rate><Rate v-model="data" v-if="disabled" disabled></Rate></div>'
});

Vue.component('radioGroupCell', {
    props: {
        data: Object,
        dataList: Array
    },
    mounted: function () {
        var dataDictionary = {};
        for (var i = 0; i < this.dataList.length; i++) {
            var entity = this.dataList[i];
            dataDictionary[entity.name] = entity.code;
        }
        ;
        this.dataDictionary = dataDictionary;
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue);
        }
    },
    template: '<RadioGroup v-model="data"><Radio v-for="item in dataList" :label="item.code">{{item.name}}</Radio></RadioGroup>'
});

Vue.component('radioCell', {
    props: {
        data: false,
        name: ""
    },
    watch: {
        data: function (newValue) {
            this.$emit('change', newValue);
        }
    },
    template: '<Radio v-model="data">{{name}}</Radio>'
});

Vue.component('checkboxGroupCell', {
    props: {
        data: Object,
        dataList: Array
    },
    mounted: function () {
        var dataDictionary = {};
        for (var i = 0; i < this.dataList.length; i++) {
            var entity = this.dataList[i];
            dataDictionary[entity.name] = entity.code;
        }
        ;
        this.dataDictionary = dataDictionary;
    },
    watch: {
        data: function (newValue) {
            if(typeof(newValue) == "boolean"){
                if(newValue){
                    newValue = [ this.$props.dataList[0].code ]
                }else{
                    newValue = []
                }
            }
            this.$emit('change', newValue);
        }
    },
    template: '<CheckboxGroup v-model="data"><Checkbox v-for="item in dataList" :label="item.code">{{item.name}}</Checkbox></CheckboxGroup>'
});