Skip to content

Lost-Kun/tablewll

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
images
images
 
 
package
package
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

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. 基础使用

  • 效果图： 示例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内元素

  • 效果图： 示例2

  • 代码：

/** 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. 添加操作列

  • 效果图： 示例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. 分页

  • 效果图： 示例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. 排序

  • 效果图： 示例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. 行悬浮显示

  • 效果图： 示例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
		}
	}
})

About

基于Vue2.x的表格插件

Resources

Readme

License

MIT license
Activity

Stars

4 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages