基於iView的列表組件封裝

封裝的好處多多，代碼便於維護、減小代碼量、減小BUG

前臺封裝之前沒有嘗試過，這回試試，哈哈

目錄

一、列表組件封裝

二、樹組件封裝

三、下拉框組件封裝

四、上傳組件封裝

列表組件的API

屬性	說明	類型	默認值
url	請求列表數據的地址 必填	String	無
pagingOption	列表底部是否顯示分頁信息及總數，有兩個配置項 showPaging、showTotal	Object	顯示分頁及總數信息
cols	列定義 必填	Array	無
height	列表高度 選填	Number	500
checkBox	是否顯示覆選框 選填	Boolean	顯示

 

事件

onSelect：選擇某一行時觸發，返回值是當前行數據

 

slot

toolButtons：列表上方的工具按鈕定義

 

列表組件的封裝

一、dataTable.vue文件

<template>
    <div>
        <div class="buttonGroup">
            <slot name="toolButtons"></slot>
        </div>
        <Table :loading="loading" border :height='height' stripe :columns="cols" :data="dataContent" @on-selection-change="onSelect"></Table>
        <Page ref="paging" v-if="pagingOption.showPaging" :total="total" style="margin-top:5px;float: right"
              :show-total="pagingOption.showTotal"
              @on-change="getData"></Page>
    </div>
</template>

<script>

    export default {
        data: function () {
            return {
                current: 1,
                pageSize: 10,
                dataContent: [],
                loading: false,
                total: 0,
                initPage: 1
            }
        },
        props: {
            height:{
              type:Number,
              default:500
            },
            url: {
                type: String,
                require: true
            },
            pagingOption: {
                type: Object,
                default: function () {
                    return {
                        showPaging: true,
                        showTotal: true
                    }
                }
            },
            cols: {},
            checkBox:{
                type:Boolean,
                default:true
            }
        },
        methods: {
            refresh() {
                this.getData(1)
            },

            getData(pageNum) {
                this.loading = true
                this.$http.get(this.url, this.getPagingInfo(pageNum)).then(res => {
                    this.dataContent = res.result.data
                    this.total = res.result.total
                    this.loading = false
                })
            },
            getPagingInfo(page) {
                const param = {
                    current: page,
                    pageSize: this.pageSize
                }
                return param
            },
            onSelect(selection){
                this.$emit('onSelect',{
                    selection:selection
                })
            }
        },
        mounted() {
            this.getData(this.initPage)
        },
        created(){
            if(this.checkBox){
                this.cols.unshift({
                    type: 'selection',
                    width: 60,
                    align: 'center'
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .margin(@border_width:10px) {
        margin-bottom: @border_width;
    }

    .buttonGroup {
        text-align: right;
        .margin(5px)
    }
</style>

二、dataTable.js

import dataTable from './dataTable.vue'

const _dataTable = {
    install:function(Vue){
        Vue.component('WtDataTable',dataTable)
    }
}

export default _dataTable

三、添加組件到Vue中

import WtDataTable from './components/table/dataTable.js'
Vue.use(WtDataTable)

列表組件的應用（簡單）

以系統日誌模塊舉例

syslogPerformance.vue

<template>
    <WtDataTable :url="url" :checkBox="checkBox" :cols="cols">
    </WtDataTable>
</template>

<script>
    export default {
        data:function(){
            return {
                url:'syslogPerformance/getData',
                checkBox:false,
                cols:[
                    {
                        title: '來訪主機',
                        key: 'remoteHost'
                    },
                    {
                        title: '訪問的url',
                        key: 'requestURI'
                    },
                    {
                        title: '請求類型',
                        key: 'requestType'
                    },
                    {
                        title: '遠程端口',
                        key: 'remotePort'
                    },
                    {
                        title: '耗時',
                        key: 'timeConsuming'
                    },
                    {
                        title: '發起時間',
                        key: 'createDateTime'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

效果

 

列表組件應用（複雜）

<template lang="html">
    <div>
        <WtDataTable ref="userList" :url="url"
                     :pagingOption="pagingOption" :cols="columns" @onSelect="onSelect">
            <div slot="toolButtons">
                <Button type="primary" @click="add">新增</Button>
                <Button type="error" @click="batchDelete">刪除</Button>
            </div>
        </WtDataTable>
    </div>
</template>

<script>
    export default {
        data() {
return {
                url: '/sysUser/getData',

                pagingOption: {
                    showPaging: true,
                    showTotal: true
                },
                columns: [
                    {
                        title: 'Id',
                        key: 'userId',
                        display: 'none'
                    },
                    {
                        title: '姓名',
                        key: 'userName',
                        render: (h, params) => {
                            return h('a', {
                                style: {
                                    color: 'blue',
                                    'text-decoration': 'underline'
                                },
                                on: {
                                    click: () => {
                                        this.$Modal.info({
                                            title: 'User Info',
                                            content: 'neirong'
                                        })
                                    }
                                }
                            }, params.row.userName)
                        }
                    },
                    {
                        title: '帳號',
                        key: 'account'
                    },
                    {
                        title: '密碼',
                        key: 'password'
                    },
                    {
                        title: '郵箱',
                        key: 'mail'
                    },
                    {
                        title: '生日',
                        key: 'birthday'
                    },
                    {
                        title: '狀態',
                        key: 'inUse',
                        render: (h, params) => {
                            let text = params.row.inUse ? '開啓' : '禁用'
                            return h('span', text)
                        }
                    },
                    {
                        title: '操做',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // this.remove(params)
                                            const _this = this
                                            WT.modal.confirm({
                                                content: '確認刪除？',
                                                onOk: function () {
                                                    _this.deleteUser(params)
                                                }
                                            })
                                        }
                                    }
                                }, '刪除'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params)
                                        }
                                    }
                                }, '修改')
                            ]);
                        }
                    }
                ],

                defaultAvatars:[],
                ruleValidate: {
                    userName: [{
                        required: true,
                        message: '用戶姓名不能爲空',
                        trigger: 'blur'
                    }],
                    account: [{
                        required: true,
                        message: '帳號不能爲空',
                        trigger: 'blur'
                    }],
                    password: [{
                        trigger: 'blur',
                        validator: validatePass
                    }],
                    passwordConfirm: [{
                        trigger: 'blur',
                        validator: validatePassCheck
                    }],
                    mail: [
                        {required: true, message: '郵箱必填', trigger: 'blur'},
                        {type: 'email', message: '郵箱地址有誤', trigger: 'blur'}
                    ]
                },
                userInfo: {
                    userId: null,
                    userName: '',
                    mail: '',
                    password: '',
                    account: '',
                    passwordConfirm: '',
                    inUse: true,
                    birthday: '',
                    avatars: []
                },
                selectedItem: [],
                mailSuffixs: []
            }
        },
        methods: {

            //列表方法
            add() {
                this.showUserAddModal()
            },
            batchDelete() {
                if (this.selectedItem) {
                    const userIds = new Array()
                    this.selectedItem.forEach((k, v) => {
                        userIds.push(k.userId)
                    })
                    this.$http.delete('/sysUser/deleteBatch', userIds).then(res => {
                        WT.toast.success("刪除成功")
                        this.reloadDataGrid()
                    })
                }
            }
        }
    }
</script>

<style lang="css">
    .ivu-form-item-content {
        text-align: left;
    }
</style>

 

效果

 

 

個人博客即將搬運同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=ewx3bubweekk