@beisen/ux-upaas-table

upaas-table '0.1.0'

基于element-ui@1.3.1中table的封装

Features

已支持特性

• 单选/全选
• 列排序
• 列固定
• 表头固定
• 自定义列
  • 列链接
  • 人员信息
  • 操作列
• 自定义列样式
• 大名片
• 拖动改变列宽
• 内置6种风格（['small-font', 'large-font'] x ['small-padding', 'middle-padding', 'large-padding']）

待开发特性

• 行编辑

Install

Vue Compatibility

• vue 2.3.3

NPM

Install the package. You should install element-ui@1.3.1 and vue@~2.3.3.

$ npm install upaas-table

Register the component

import UpassTable from 'upaas-table'
Vue.component('upaas-table', UpassTable)

Basic Usage

Setting Options

const MockData = {
	columns: [
		{
      prop: 'name',
      label: '姓名'
    },
    {
      prop: 'email',
      label: '邮箱'
    }
	],
	tableData: [
		{
			name: 'guomeishan',
			email: '[e-mail]'
		},
		{
			name: 'John',
			email: '[e-mail]'
		}
	],
	// 表格属性，可选
	props: {
		height: '',  // 表格高度（设置高度后，表头自动固定）
    maxHeight: '',  // 表格最大高度（可实现响应式高度）
    fit: true,  // 是否根据内容自动撑大列宽
    showHeader: true,  // 是否显示表头
    rowClassName: 'small-font middle-padding'  // 表格风格（字体定制：small-font || large-font; small-padding || middle-padding || large-padding）
	}
}

Using in your templte

<upaas-table :columns="columns" :tableData="tableData", :props="props"></upaas-table>

Using in your render functions

render (h) {
	return h('upaas-table', {
		props: {
			columns,
			tableData,
			props
		}
	}, [])
}

log

...

For more information, please send emails to [e-mail]