vue jsx table
1.0.0
Documentation example
This component is based on the secondary development of element-table and is based on actual business. It encapsulates commonly used functions, generates tables through configuration, and implements multi-level header expand items, custom header functions, etc.
Element-ui needs to be introduced into the project before use
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > The columns and tableData options are required for table configuration.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,Setting children to column can render the group header.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Set render options for column, Function(row, column, $index)
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , You only need to set type:expand for the column configuration item. The expanded content can use slot or render. If slot and render are configured at the same time, slot will be ignored.
{
type : 'expand' ,
slot : 'expand' ,
} , You only need to set solt:'' for the column configuration item, and slot is the name of the slot.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , You only need to set renderHeader for the column configuration item. renderHeader is the native configuration of element-ui (Officially, it is not recommended to use the render-header function on the column. It is recommended to use slots!! There will be a prompt on the console, embarrassing). You can also use slots by configuring the slotHeader item. Note that the slot name cannot be repeated. Define The slot configuration has been defined in the template declaration
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , Through the solt slot, you can also use the render function to render components
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >All Table Attributes are implemented through v-bind="$attrs", additional Table Attributes:
| parameter | illustrate | type | default value |
|---|---|---|---|
| columns | table columns | Array | [] |
| columnsKeyName | The key of column. If you need to use the filter-change event, you need this attribute to identify which column the filter condition is (column-key of Table-column Attributes) | string | - |
| align | Alignment | String | left |
| showPagination | Whether to display paging controls | Boolean | true |
| currentPage | The current page of the current paging control | Number | 1 |
| pageSizes | pageSizes of paging controls | Array | [10, 20, 30, 50] |
| pageSize | pageSize of paging control | Array | [] |
| layout | layout of paging control | String | 'sizes, prev, pager, next,total' |
| total | total of paging control | Number | 0 |
| paginationStyle | The style of the paging control | Object | - |
| showOverflowTooltip | Display the tooltip when the content is too long and is hidden. If the column is not configured separately with showOverflowTooltip, use this attribute. The default is true. | Boolean | true |
| showTableSetting | Display table settings | Boolean | false |
| hideColumns | Column and label name that need to be hidden. In some scenarios, hidden columns need to be displayed based on some conditions. | Array | [] |
| customClass | Custom style class | Array | ['vue-jsx-table-wrapper'] |
All Table Events are implemented through v-on="$listeners", additional Table Events:
| parameter | illustrate | type | default value |
|---|---|---|---|
| size-change | This event will be triggered by changes in page-change and current-change. It is added to facilitate paging changes. | Function | 'function({pageSize: 10,currentPage: 1,}) {}' |
| size-change | Fired when pageSize changes | - | - |
| current-change | Fired when currentPage changes | - | - |
| parameter | illustrate | type | default value |
|---|---|---|---|
| prop | The field name corresponding to the column content | string | - |
| slot | The slot name of the column (note that if the table is nested, the slot name cannot be repeated, slot scope ({ row, $index })) | string | - |
| label | Displayed title | string | - |
| width | Corresponding column width | Number | - |
| showOverflowTooltip | Show tooltip when content is too long and is hidden | Boolean | - |
| fixed | Whether the column is fixed to the left or right (true, left, right), true means fixed to the left | string, boolean | - |
| render | jsx rendering function | function | render(row, column, $index) |
| type | selection/index/expand | string | - |
| renderHeader | Function used for table header, column title Label area rendering | Function(column, scope }), column is the configuration item, and scope is the scope of the native component. (This attribute is not a native parameter) | - |
| cellredstar | Whether to put a red star sign before the header text | Boolean | false |
| sortable | Whether the corresponding column can be sorted. If set to 'custom', it means that the user wants to sort remotely and needs to listen to the sort-change event of the Table. | boolean, string (true, false, 'custom') | false |
| formatter | Used to format content (element-ui original attribute) | Function(row, column, cellValue, index) | - |
| selectable | It is only valid for columns with type=selection. The type is Function. The return value of Function is used to determine whether the CheckBox of this row can be checked. | Function(row, index) | - |
| showHeaderTooltip | Whether the copy prompt information is displayed when the mouse is moved to the table header | Boolean | - |
| headerTooltipText | Header displays copy information content | String | - |
