Ui-plug-in-dzg NPM

插件安装

npm install ui-plug-in-dzg

引用插件包

import UiPlugInDzg from 'ui-plug-in-dzg'
Vue.use(UiPlugInDzg)

在项目中引用表格

输入图片说明

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: '地址'
}]

输入图片说明

tableAttributes 用法

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

输入图片说明

tableEvents 用法

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

输入图片说明

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('标签已经关闭')
} 
}

输入图片说明