/uniapp-elemnt-table

模仿element-ui的表格组件

Primary LanguageVue

no-bad-table

取名nobadtable,源于它看起来不是特别的糟糕

这里默认大家都非常熟悉vue和uniapp的包引入,不再阐述uniapp组件引入方法以及uniapp组件和vue的区别

插件市场更新会比github更新延后,查看github项目

插件市场更新会比github更新延后,查看demo源码

插件市场更新会比github更新延后,查看demo使用引入方式

如果本项目给你带来了便利,请给个star

支持功能大概如下

固定高度不支持同时固定某一列

已测试平台 ->ios,android,wap,微信小程序

基本使用示例源码

html

    <v-table :columns="columns" :list="data"></v-table>

javascript (data数组必须提供id)

	import vTable from "@/components/table.vue"
	export default{
		components: {
			vTable
		},
		data(){
			return {
				data: [{
						name: 'John Brown',
						age: 18,
						address: 'New York No. 1 Lake Park',
						id: "1",
						
					}
				],
				columns: [{
						title: "ID",
						key: "id"
					},
					{
						title: 'Name',
						key: 'name'
					},
					{
						title: 'Age',
						key: 'age'
					},
					{
						title: 'Address',
						key: 'address'
					}
				],
			}
		}
		
	}

赞助我买咖啡

如果作者的行为给你带来了便利,打赏入口在下面

如果有需要作者协助的地方,打赏在下面

O(∩_∩)O哈哈~

基本属性

html标签属性

属性 说明 类型 默认 必填
columns 列数据 Array -- 必填
dataColSpan 行数据 Array -- 必填
row-class-name 行样式 String或Function -- --
height 表格高度(可用固定表头) Number -- --
td-height 单元格高 Number 110 --
cel-center 单元格水平居中 Boolean true --
td-width 单元格宽 Number 30 --
td-padding 单元格间距 Number 10 --
border-color 表格边框颜色 String #666 --
th-td-height 表头单元格高 Number 30 --
loading 加载状态 Boolean false --
selection 可选mulit和single String -- --
fixed-checkbox 固定多选列 和selection="mulit"共存 Boolean false --
span-method 行列合并 Function -- --
slot-cols 插槽自定义列元素,对应columns的key Array -- --
emptyText 插没数据提示文字 String -- --
emptyClickFn 没数据点击响应函数 Function -- --

事件

属性 说明 参数
@on-selection-change 单选 多选变更 {old:"",new:""}
@delete 自定义事件(它可以不叫delete,可以是任意事件,只要你在list里面定义了) {row:{},index:Number}

list 参数

属性 说明 类型
cellClassName 设置行内某一列的样式类名 Object
operate 数据操作的列 Object

columns 参数

属性 说明 类型
$width 设置列宽度 例如 "120px",请务必使用px单位 String
$fixed 固定某一列,可选left和right String
$operateList 数据操作选项和list的operate对应 Array