基于iView的列表组件封装

封装的好处多多,代码便于维护、减少代码量、减少BUG

前台封装以前没有尝试过,这回试试,哈哈

目录

1、列表组件封装

2、树组件封装

3、下拉框组件封装

4、上传组件封装

列表组件的API

属性

说明

类型

默认值

url

请求列表数据的地址 必填

String

pagingOption

列表底部是否显示分页信息及总数,有两个配置项 showPaging、showTotal

Object

显示分页及总数信息

cols

列定义 必填

Array

height

列表高度 选填

Number

500

checkBox

是否显示复选框 选填

Boolean

显示

事件

onSelect:选择某一行时触发,返回值是当前行数据

slot

toolButtons:列表上方的工具按钮定义

列表组件的封装

1、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>

2、dataTable.js

import dataTable from './dataTable.vue'

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

export default _dataTable

3、添加组件到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>

效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

html基本标签(慕课网)

2645
来自专栏iKcamp

微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频)+发布流程

第一章:小程序初级入门教程 小试牛刀【含视频】 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝...

2029
来自专栏青枫的专栏

day26_Struts2学习笔记_03

软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的、符合来访者阅读习惯的页面或数据。

691
来自专栏ionic3+

ionic3应该善用组件和指令

其实ionic3(angualr4)和ionic2(angular2)差不多,但和ionic1(angular1)就差别非常大了,可以说基本是推倒了重来。在an...

824
来自专栏Youngxj

41个Web开发者都收藏的实用代码

1713
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

20610
来自专栏程序员八阿哥

Python从入门到摔门(6):Python Web服务器Tornado使用小结

举例来说,假设某个银行网站有这样的 URL: http://bank.example.com/withdraw?amount=1000000&for=Eve ...

782
来自专栏liulun

Nim教程【四】

这是国内第一个关于Nim的系列教程 先说废话 Screenshot (2).png 高雅的Nim Screenshot (3).png 方法 Screens...

19510
来自专栏转载gongluck的CSDN博客

MFC自定义控件

需要在MFC实现自定义控件功能,网上搜集找的如下方法实现: 以下是步骤说明。 一、自定义一个空白控件  1、先创建一个MFC工程        NEW Pr...

3647
来自专栏编程直播室

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

2015

扫码关注云+社区