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

相关文章

来自专栏开心的学习之路

02 Jmonkey3.2.0+Nifty1.4.2实现GUI

GUI选择 实现Jmonkey的GUI有三四种方式,我尝试了三种,有 Lemur tonegod nifty 最终选择了Nifty, 因为Lemur用java语...

5168
来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

3587
来自专栏杂七杂八

selenium使用

pip insatll selenium 由于如果需要使用selenium的话,需要为本机配置对应浏览器的驱动,下面以chomedriver为例,首先安装ch...

1363
来自专栏老马寒门IT

jQuery EasyUI 详解

easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。

3961
来自专栏james大数据架构

在ASPNET中使用JS集锦

(一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')")...

2197
来自专栏iOSer成长记录

AlamofireImage 源码阅读

3316
来自专栏Coding迪斯尼

实现盒子动画和键盘特效

1032
来自专栏一个会写诗的程序员的博客

React State(状态): React通过this.state来访问state,通过this.setState()方法来更新stateReact State(状态)

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里...

1333
来自专栏python_lwx

新手请教python抽奖程序

大家好,我开始学python,想做一个抽奖程序,源代码如下,如果我要在框架内加上1等奖1个人 ,2等奖2个人,三等奖3个人 应该怎么样编写相关联的代码,就是点击...

5114
来自专栏Android小菜鸡

解决Recyclerview列表中使用CheckBox导致下滑时选中状态混乱

  今天用recyclerview时候发现checkbox重复使用会导致OnCheckedChangeListener 出现一个不太友好的问题,问题是这样的:R...

2292

扫码关注云+社区

领取腾讯云代金券