Tablewll NPM | npm.io

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	string	-	-

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
		}
	}
})

@infinitebrahmanuniverse/nolb-tab @everything-registry/sub-chunk-2871

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago