vue free table

vue-free-table

Based on the secondary encapsulation of element ui table, it supports almost all the functions of the original table

Document usage

DEMO preview

characteristic

• Secondary encapsulation based on element-ui table to reduce the amount of code
• Inherit the parameters and events of the element-ui table component
• Support render rendering
• Support slot slot
• Support component introduction
• Support tree data
• Support paging function

document

property	illustrate	type	default
data	data attribute of table	Array	[]
column	Used to control table column rendering	Array	[]
columns-props	Used to define properties common to all column	Object
pagination	Whether to display the paging component, please see the pagination配置column for details.	Boolean	false

It just encapsulates a layer in the Element Table. The props, event listening and settings originally set on the Table can be directly bound to the component. For specific configuration, please refer to the Element Tabel document.

The column configuration column is used to control the column behavior of the table. Setting example:

 const column = [
  { label : '日期' , prop : 'date' , width : 100 } ,
  { label : '姓名' , prop : 'name' } ,
  { label : '邮编' , prop : 'zip' } ,
  {
    label : '地址' ,
    prop : 'address' ,
    render : ( h , scope ) => {
      return ( < el-tag > { scope . row . address } < el-tag > )
    }
  } ,
  {
    label : '组件' ,
    prop : 'cmp' ,
    component : EditBtn ,
    listeners : {
      'row-edit' ( row ) {
        console . log ( 'row-edit' , row )
      }
    }
  }
]

columns-props configuration columns-props is used to configure the default props attributes of each column of columns.

 const columnsProps = {
  align : 'left' ,
  minWidth : 120
}

Pagination configuration pagination is used to control the display of paging components. The pagination paging component is a secondary encapsulation that inherits el-pagination. It comes from the paging component in the vue-element-admin component library in the open source project.

parameter	illustrate	type	default value
total	Total number of entries	Number	/
page	The current page number supports the .sync modifier	Number	1
limit	Display the number of entries per page, supporting .sync modifier	Number	20
page-sizes	Display number selector option settings per page	Number[]	[10, 20, 30, 50]
hidden	Whether to hide	Boolean	false
auto-scroll	Whether to automatically scroll to the top after pagination	Boolean	true

It also supports all the attributes supported by el-pagination of other Elements. See documentation for details

Example

 < template >
  < free-table border stripe : data = "data" : column = "column" > </ free-table >
</ template >

< script >
import FreeTable from '@/components/FreeTable'

export default {
  components : {
    FreeTable
  } ,
  data ( ) {
    return {
      column : [
        { label : '日期' , prop : 'date' } ,
        { label : '姓名' , prop : 'name' } ,
        { label : '省份' , prop : 'province' } ,
        { label : '市区' , prop : 'city' } ,
        { label : '地址' , prop : 'address' }
      ] ,
      data : [
        {
          date : '2016-05-03' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        } ,
        {
          date : '2016-05-02' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
< / script>

Build command

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint