tablewll

基于vue2.x的表格组件，支持自定义td内元素、事件绑定、排序、分页（后台配合）、表头固定、行悬浮显示隐藏、懒加载优化等功能

安装

npm install tablewll --save

引用组件

html引入

<!-- 引入样式 -->
<link rel="stylesheet" href="xxxx/tablewll/TableComponent.css">

<!-- 引入js -->
<script src="xxxx/tablewll/TableComponent.js"></script>

模块引入

配合webpack使用

import Vue from 'vue'
import tablewll from 'tablewll'
import 'tablewll/TableComponent.css'

Vue.use(tablewll)

使用示例

1. 基础使用

效果图：
代码：

/** html */
<div id="tableBox">
  <table-component :table-data="table_data" :table-config="table_config"></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index", width:'50px'}, //width设置列宽
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age"},
				{header: "性别", dataIndex: "sex"}
			]
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:'17',
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:'女'
			}
		]
	}
})

2. 自定义td内元素

效果图：
代码：

/** html */
<div id="tableBox">
  <table-component :table-data="table_data" :table-config="table_config" ></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index"},
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age"},
				{header: "性别", dataIndex: "sex"}
			]
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:{
					//自定义html元素类型
					T_type:'input',
					//表单元素为绑定值,一般为innerText
					T_value:'17',
					//指定元素class
					T_class:'',
					//指定元素style
					T_style:{
						width:'100px'
					},
					//正常的 html 特性
					T_attrs:{
						id: 'foo'
					},
					// DOM 属性
					T_domProps:{
						innerHTML: ''
					},
					//事件监听器
					T_events:{
						change:function(e, tdData, trData, tbData){
							alert(tdData.T_value)
						}
					}
				},
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:{
					T_type:'select',
					T_value:[//select值比较特殊，需嵌套数组
						[
							{
								value:0,
								text:'男'
							},
							{
								value:1,
								text:'女',
								selected:true //默认值
							}
						]
					],
					T_style:{
						width:'100px'
					}
				}
			}
		]
	}
})

3. 添加操作列

效果图：
代码：

/** html */
<div id="tableBox">
  <table-component :table-data="table_data" :table-config="table_config" ></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index"},
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age"},
				{header: "性别", dataIndex: "sex"},
				{
					header: "操作",
					T_type:'button',
                    			T_value:['详情', '删除'],//多元素，使用数组
                    			T_style:{
                        			margin:'auto 5px'
                    			},
					T_events:[//多元素，使用数组
						{
							click:function(e, tdData, trData, tbData){
								alert(JSON.stringify(trData))
							}
						},
						{

						}
					]
				}
			]
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:'17',
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:'女'
			}
		]
	}
})

4. 分页

效果图：
代码：

/** html */
<div id="tableBox">
  <table-component :table-data="table_data" :table-config="table_config" :record-total="total_number" :get-data="getData" ></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index"},
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age"},
				{header: "性别", dataIndex: "sex"}
            		],
            		pageable: true, //是否分页，默认false
            		size: 10 //每页展示条数，默认10
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:'17',
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:'女'
			}
        ],
        total_number:20 //传入总数据量
    },
    methods:{
        /**
         * 分页排序调用函数
         * 
         * @param {number} curPage 当前页
         * @param {number} size 每页显示条数
         */
        getData:function(curPage, size){
            /**
             * 请求接口获取数据，重新赋值table_data
             */
        }
    }
})

5. 排序

效果图：
代码：

/** html */
<div id="tableBox">
  <table-component :table-data="table_data" :table-config="table_config" :get-data="getData" ></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index", sortable: true}, //sortable为true，则该列可排序
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age", sortable: true},
				{header: "性别", dataIndex: "sex"}
			]
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:'17',
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:'女'
			}
        ]
    },
    methods:{
        /**
         * 分页排序调用函数
         * 
         * @param {number} curPage 当前页
         * @param {number} size 每页显示条数
         * @param {string} dataIndex 选中的排序字段
         * @param {number} orderType 排序方式，0：降序，1：升序
         */
        getData:function(curPage, size, dataIndex, orderType){
            /**
             * 请求接口获取数据，重新赋值table_data
             */
        }
    }
})

6. 行悬浮显示

效果图：
代码：

/** html */
<div id="tableBox">
  <table-component :table-data="table_data" :table-config="table_config" ></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index"},
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age"},
				{header: "性别", dataIndex: "sex"}
			],
			hovereventOpen:true, //是否使用行悬浮显示，默认false
			hovereventOpenWidth:'100px', //悬浮区域宽度
			hovereventConfig:{//悬浮区域显示内容，配置项和td自定义元素相同
				T_type:'button',
				T_value:['详情','删除'],
				T_style:{
					margin:'auto 5px'
				},
				T_events:[//多元素，使用数组
					{
						click:function(e, tdData, trData, tbData){
							alert(JSON.stringify(trData))
						}
					},
					{

					}
				]
			}
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:'17',
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:'女'
			}
        ]
    }
})

Attributes

参数	说明	类型	可选值	默认值
table-data	显示的数据	array	-	-
table-config	表格相关配置	object	-	-
get-data	分页排序调用函数	function	-	-
record-total	分页数据总数	number	-	0
show-waitingicon	是否显示等待字样	boolean	-	false

table-data options

Key	说明	类型	可选值	默认值
tr_class	表格每行class	string	-	-
tr_style	表格每行style	object	-	-

td自定义元素 options

Key	说明	类型	可选值	默认值
T_type	自定义html元素类型，如：input、select、img等	string	-	-
T_value	表单元素为绑定值,一般为innerText;类型为array时，通过数组长度确定元素个数	string/array	-	-
T_class	元素class	string/array	-	-
T_style	元素style	object/array	-	-
T_attrs	元素的html特性，如：id	object/array	-	-
T_domProps	元素DOM属性，如：innerHTML	object/array	-	-
T_events	元素的监听事件，如：click、mouseover；参数依次为e,tdData,trData,tbData	object/array	-	-

table-config options

Key	说明	类型	可选值	默认值
tableHeaders	表头配置（详细见tableHeaders options）	array	-	-
pageable	是否分页	boolean	-	false
size	分页时每页显示条数	number	-	10
showCheckbox	是否显示复选框	boolean	-	false
checkboxWidth	复选框列宽度	string	-	50px
theadClass	表头Class	string	-	-
theadStyle	表头style	object	-	-
trClickEvent	表格内容tr点击事件触发方法，参数依次为：e,trData,tbData	function	-	-
hovereventOpen	是否使用行悬浮显示	boolean	-	false
hovereventOpenWidth	悬浮区域宽度	string	-	120px
hovereventConfig	悬浮区域显示内容配置（参考td自定义元素 options）；特：可通过T_nodeNumber确定元素个数	object	-	-
lazyload	是否启用懒加载	boolean	-	true
lazySize	懒加载每加载一次显示条数	number	-	40

tableHeaders options

Key	说明	类型	可选值	默认值
header	表头的显示文字	string	-	-
dataIndex	该列对应table-data中数据的key	string	-	-
width	列宽度，默认自适应，支持px，%等	string	-	-
sortable	该列是否可排序	boolean	-	-
td自定义元素中options	用于添加操作类	-	-	-

Methods

方法名	说明	参数
refreshTableData	重新调用getData获取数据，若分页，则跳转到第一页	-
getSelectedData	获取复选框选中的数据	-
getCurrentPage	获取分页时的当前页	-

Methods使用示例

代码：

/** html */
<div id="tableBox">
  <table-component ref="table" :table-data="table_data" :table-config="table_config" ></table-component>
</div>

/** js */
new Vue({
	el: '#tableBox',
	data:{
		table_config:{
			tableHeaders: [
				{header: "序号", dataIndex: "index"},
				{header: "姓名", dataIndex: "name"},
				{header: "年龄", dataIndex: "age"},
				{header: "性别", dataIndex: "sex"}
			],
			showCheckbox:true//是否显示复选框
		},
		table_data:[
			{
				index:1,
				name:'小明',
				age:'17',
				sex:'男'
			},
			{
				index:2,
				name:'小红',
				age:'14',
				sex:'女'
			}
		]
	},
	methods:{
		/**
		 * 获取勾选的表格数据数据
		*/
		getSelectedData:function(){
			return this.$refs.table.getSelectedData()//Methods
		}
	}
})

tablewll
Release 2.2.3

Release 2.2.3

2.2.3

2.2.2

2.2.1

2.2.0

2.1.2

2.1.1

2.1.0

Documentation

tablewll

安装

引用组件

html引入

模块引入

使用示例

1. 基础使用

2. 自定义td内元素

3. 添加操作列

4. 分页

5. 排序

6. 行悬浮显示

Attributes

table-data options

td自定义元素 options

table-config options

tableHeaders options

Methods

Methods使用示例

Stats

Releases

Contributors

tablewll Release 2.2.3

Release 2.2.3 Toggle Dropdown 2.2.3 2.2.2 2.2.1 2.2.0 2.1.2 2.1.1 2.1.0

Documentation

tablewll

安装

引用组件

html引入

模块引入

使用示例

1. 基础使用

2. 自定义td内元素

3. 添加操作列

4. 分页

5. 排序

6. 行悬浮显示

Attributes

table-data options

td自定义元素 options

table-config options

tableHeaders options

Methods

Methods使用示例

Stats

Releases

Contributors

tablewll
Release 2.2.3

Release 2.2.3

2.2.3

2.2.2

2.2.1

2.2.0

2.1.2

2.1.1

2.1.0