专栏首页全栈基于iView的列表组件封装

基于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 条评论
登录 后参与评论

相关文章

  • 前端工程化(三)---Vue的开发模式

    用户2193479
  • Java正则

    1、正则中的各类特殊符号。包括限定符、非打印字符、定位符、元字符,它们的区别见TestCase

    用户2193479
  • node 模块安装的问题,谁能帮我看看怎么回事

    用户2193479
  • WebSorcet 回调转 Pormise task

    当前门禁卡通过本地服务插件与页面建立 websorcet 通信, 实现读写卡操作。

    copy_left
  • [PHP] 使用反射实现的控制反转

    1.$this->getObject($class, $config->getConfig('param'), array($this), $interfac...

    陶士涵
  • 设计模式| 行为型模式 (上)

    行为型模式共十一种:策略模式、模板方法模式、观察者模式、迭代器模式、解释器模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式。 分两篇文...

    進无尽
  • 新版RTSP视频平台EasyNVR视频广场分页数据展示优化

    时代在不断进步,大众的审美在不断变化,同时对视频直播的要求也在升高。因此我们总会对我们的视频平台不断做升级,以适应大众的需要。在开发过程中我们也会不断做记录。

    EasyNVR
  • 如何建立有效的安全运维体系

    随着互联网行业的蓬勃发展,国内的黑客产业链早已达数十亿级别。除了各类网络攻击之外,一些黑客入侵情况也并不鲜见。这种事件相对于网络攻击有着更大的破坏力,系统被入侵...

    FB客服
  • 精选Android中高级面试题:性能优化,JNI,设计模式

    2、内存中如果加载一张 500 * 500 的 png 高清图片。应该是占用多少的内存?

    Android技术干货分享
  • RabbitMQ 最常用的三大模式

    不处理路由键,只需要简单的将队列绑定到交换机上发送到交换机的消息都会被转发到与该交换机绑定的所有队列上。 Fanout交换机转发消息是最快的。

    海向

扫码关注云+社区

领取腾讯云代金券