# ui-plug-in

**Repository Path**: dongzhigang/ui-plug-in

## Basic Information

- **Project Name**: ui-plug-in
- **Description**: 基于 elementUi 进行二次封装开发
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ui-plug-in

> A Vue.js project

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build


# 插件安装
npm install ui-plug-in-dzg

# 引用插件包
import UiPlugInDzg from 'ui-plug-in-dzg'  
Vue.use(UiPlugInDzg)

# 在项目中引用表格 

![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/234253_fe164c8c_1057362.png "屏幕截图.png")


# ui-table 的属性
| 参数            | 说明                              | 类型     | 默认值  |
|---------------- |----------------------            |--------  |------|
| tableData       | 显示的数据  与elementUi data属性一样                      | Array    | ---- |
| tableAttributes | 表格的属性，继承elementUi table属性      | Object   | ---- |
| tableEvents     | 表格的方法，继承elementUi table方法    | Object   | ---- |
| tableColumn     | 表格列的属性，继承elementUi table-column属性    | Array    | ---- |
| pageAttributes  | 分页的属性，继承elementUi Pagination 属性    | Object | ---- |
| pageEvents      | 分页的方法，继承elementUi Pagination 方法    | Object | ---- |

# tableData 用法 案例

    tableData =  [{
    date: '2020-06-02',
    name: '刘德华',
    address: '广州市黄埔区'
    },  
    {
    date: '2020-06-02',
    name: '刘德华',
    address: '广州市黄埔区'
    },  
    {
    date: '2016-05-01',
    name: '刘德华',
    address: '广州市黄埔区'
    },  
    {
    date: '2016-05-03',
    name: '刘德华',
    address: '广州市黄埔区'
    }]  
    
    tableColumn = [{
    prop: 'date',
    label: '日期'
    },  
    {
    prop: 'name',
    label: '姓名'
    },  
    {
    prop: 'address',
    label: '地址'
    }]  

![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/234341_69c08702_1057362.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/231641_149df60a_1057362.png "屏幕截图.png")  

# tableAttributes 用法
    跟 element ui 的Attributes 绑定属性一样  
    如 带斑马纹和去掉边框
    tableAttributes = { 
    border: false, 
    stripe: true  
    }  

![输入图片说明](https://images.gitee.com/uploads/images/2020/0701/110525_03c5210c_1057362.png "屏幕截图.png")

# tableEvents  用法
    跟 element ui 的Events 绑定方法一样 
    tableEvents = {
        'cell-click': this.handleMouse
    }  
    methods: {
        handleMouse () {
            alert('hello word')
        }
    }

![输入图片说明](https://images.gitee.com/uploads/images/2020/0701/111508_d4605a0d_1057362.png "屏幕截图.png")  

# tableColumn --除了继承elementUI Table-column属，还增加嵌入标签和按钮参数  

| 参数      | 说明 | 类型     | 默认值  |
|---------|----|--------|------|
| tags    | 标签 | Array | ---- |
| buttons | 按钮 | Array | ---- |

# tags | buttons
| 参数         | 说明                          | 类型       | 默认值  |
|------------|-----------------------------|----------|------|
| text       | 文本                          | any      | ---- |
| attributes | 属性，继承elementui tag|button 属性，       | Object   | ---- |
| events     | 方法, 返回值是Object, 回调值是row列的数据 | Function | ---- | 

# tags | buttons  的text、attributes、events     用法 , events方法要获取row数据要用bind绑定

    tableColumn = [  
    {
    prop: 'date',
    label: '日期'
    },  
    {
    prop: 'name',
    label: '姓名'
    },  
    {
    prop: 'address',
    label: '地址'
    },  
    {
    prop: '',
    label: '标签',
    tags: [{
        text: '标签',
        attributes: {
            closable: true            // 标签有关闭按钮
        },
        events: (row) => {
            return {
                'click': this.handleClick.bind(this, row),
                'close': this.handleClose
            }
        }
    }]
    },  
    {
    prop: '',
    label: '操作',
    buttons: [{
        text: '确定',
        attributes: {
            size: 'mini'
        },
        events: (row) => {
            return {
                'click': this.handleClick.bind(this, row)
            }
        }
    }]
    }]   
    methods: {  
    handleClick (row) {
    console.log(row)
    }, 
    handleClose () {
    console.log('标签已经关闭')
    } 
    } 
![输入图片说明](https://images.gitee.com/uploads/images/2020/0701/114731_c32592b8_1057362.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0701/114222_3164b8f3_1057362.png "屏幕截图.png")