Render dynamic content from scoped slots. Bgreay 2017-07-27 15:23:31 UTC #1. Hi, would appreciate some help understanding how I could render content based.

Dynamic scoped slots in Vue.js Posted on 11 April 2019 in Web Slots are super-powerful in Vue.js. They let you inject components from a parent into a various parts of the child, helping you compose nice and generic components.
Because Vue supports Dynamic Slot Names, you can use variables to set the slot names using the v-bind:attributeName='value' syntax. This way you could do something like: slot:'cell(' + b + ')'='data' v-for='b in booleanFields' But using the quotes there is not possible due to the dynamic argument expression constraints.

vue-table-dynamic

A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.

vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and oriented to the runtime.

Features

Multiple Select
Search
Sort
Filter
Pagination
Edit
Border
Stripe
Highlight
Column Width
Configure Header
Fixed Header

Install

Usage

Import

Registration

Global registration

Local registration

Basic Table

Basic table usage

Border

Bordered table usage

border:true with border
border:false without border

Stripe

Striped rows

stripe:true striped
stripe:false unstriped

Highlight

Highlighted rows/columns/cells

highlight:{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;} configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]} if negative, the position from the end of the array.
highlightedColor:string configure highlighted colors

Multiple Select

Select multiple rows

showCheck:boolean show checkbox of rows
getCheckedRowDatas:function get data for all currently selected rows
setAllRowChecked:function(selected:boolean) toggle all selection
select:event currently selected/unselected rows

Search

Filter rows by keyword

enableSearch:boolean enable/disable searching
search:function(value:string) manual row filtering

Sort

Sort rows based on specified column data

sort:Array<number> array members are sortable column indexes. such as: [0, 1]

Filter

Filter rows based on specified column data and rule

filter:Array<{column:number; content:Array<{text:string; value:string|number;}>; method:function;}> specify filterable columns and rules. such as: [{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
filter[].column: column index
filter[].content: filter items
filter[].method: filter rule.

Pagination

Table with pagination

pagination:boolean enable/disable pagination
pageSize?:number row count of each page. default: 10
pageSizes?:Array<number> options of row count per page. default: [10, 20, 50, 100]

Edit

Editable table
Support specifying rows/columns/cells for editing

edit:{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;} configure editable rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array.
getData:function() table data changed after editing, get the latest data by this method.
cell-change:event cell data changed event
edit:{row: 'all'} all cells can be edited
if header is 'row', the first row is not editable

Column width

Configure column width

columnWidth:Array<{column:number; width:number|string;}> such as: [{column: 0, width: 60}, {column: 3, width: '15%'}]
columnWidth[].column index of column
columnWidth[].width width of column. number for pixel value, string for percentage

Header Configure

header:row the first row is header
header:column the first column is header
header:' no header

Fixed Header

Fix header by configure the height of table

height:number table height
when the value of header is not 'row', the first row is a normal row, will not fixed

API

Attributes

params is the object that need to be passed to the component props
the following items are all child properties of the params object
data is required attribute, others are optional

name	description	type	optional value	default value
`data`	source data	`Array<[number, ..., number]>`	-	`[]`
`header`	configure header	`string`	`row`: the first row is header; `column`: the first column is header; `'`: no header	`'`
`border`	table with border	`boolean`	`true`/`false`	`false`
`stripe`	striped table	`boolean`	`true`/`false`	`false`
`highlight`	configure highlighted rows, columns, cells. such as: {row: `[1]`, column: `[1]`, cell: `[[-1, -1]]`}. if negative, the position from the end of the array.	{row?:Array<>; column?:Array<>; cell?:Array<>;}	-	`{}`
`highlightedColor`	highlighted colors	`string`	-	`#EBEBEF`
`showCheck`	show checkbox of rows. Only when the `header` is `'row'`, the first cell of the first row is the checkbox of all rows. Otherwise, the first cell is the checkbox of the first row	`boolean`	`true`/`false`	`false`
`enableSearch`	enable/disable searching, filter rows by keyword	`boolean`	`true`/`false`	`false`
`minWidth`	min width of table	`number`	-	`300`
`maxWidth`	max width of table	`number`	-	`1000`
`height`	table height. fix header by configure the height of table	`number`	-	-
`rowHeight`	row height	`number`	`>= 24`	`30`
`columnWidth`	Configure column width	Array<{column:number; width:number/string;}>	-	-
`sort`	sort rows b

Vuejs Dynamic Slot Content