【vue,iview中table的自定義render函數用法學習】

<!--
 * 版權所有:xxxxxxx技術有限公司
 * 描述:【vue,iview--》 table的自定義render函數用法學習】
 * 作者:wangjj
 * 版本          開發者            日期              描述
 * 1.0.0.0       wangjj          2019/09/25         新建
 -->
<template>
    <div>
        <Table :columns="columnsTab" :data="tableRent" :height="300" border stripe></Table>
    </div>
</template>


<script>
    export default {
        name: 'test',
        data () {
            return {
                //表格數據
                tableRent: [],
                //表格頭欄
                columnsTab: [
                    {
                        title: '是否全免',
                        width: 100,
                        align: 'center',
                        key: 'rentFree',
                        render: (h, params) => {
                            return h('Checkbox', {
                                props: {
                                    value: params.row.rentFree
                                },
                                on: {
                                    'on-change': event => {
                                        /**
                                         * 判斷是否多選,此處做邏輯處理,方法抽出去也可以
                                         */
                                        if (event) {

                                        } else {

                                        }
                                    }
                                }
                            });
                        }
                    }
                ]
            };
        },
        methods: {}

    };
</script>
<style scoped>

</style>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章