vue表格生成组件
Vue组件模拟器表 (Vue Component simter-vue-table)
A Vue component used to generate HTML table element.
Vue组件，用于生成HTML表格元素。
View demo
查看演示
Download Source
下载源
Options:
选项：
| Name___________ | Require | ValueType | Description |
|---|---|---|---|
| columns | true | [{}] | Define table columns |
| ├ id | false | String | The column's id, it's the key in the rows item |
| ├ label | true | String | The column's visible text |
| ├ width | false | String | The column's width, such as '2em' |
| ├ children | false | [{}] | The child group columns. id and width will be ignored if define this property |
| ├ headerClass | false | String | This column's thead/tr/th element class, follow Vue Class Bindings |
| ├ headerStyle | false | String | This column's thead/tr/th element style, follow Vue Class Bindings |
| ├ class | false | String | This column's tbody/tr/td element class, follow Vue Class Bindings |
| ├ style | false | String | This column's tbody/tr/td element style, follow Vue Class Bindings |
| ├ cell | false | {} String | Define cell customized, String type means setting component value |
| │ ├ component | false | String | The cell component's name |
| │ ├ classes | false | {} | Define the cell's inner dom elements classes, keys is up to the component design |
| │ ├ styles | false | {} | Define the cell's inner dom elements styles, keys is up to the component design |
| │ ├ ...custom | false | custom | The custom properties for all this column's cell component. It is up to the component design |
| rows | true | [{}] | The table's row data |
| classes | false | {} | Define inner dom elements global classes |
| ├ headerRow | false | String | thead/tr class, follow Vue Class Bindings |
| ├ headerCell | false | String | thead/tr/td class, follow Vue Class Bindings |
| ├ row | false | String | tbody/tr class, follow Vue Class Bindings |
| ├ cell | false | String | tbody/tr/td class, follow Vue Class Bindings |
| ├ groupRow | false | String | group tbody/tr class, follow Vue Class Bindings |
| ├ groupCell | false | String | group tbody/tr/td class, follow Vue Class Bindings |
| ├ table | false | String | table class, follow Vue Class Bindings |
| ├ thead | false | String | thead class, follow Vue Class Bindings |
| ├ tbody | false | String | tbody class, follow Vue Class Bindings |
| styles | false | {} | Define inner dom elements global styles, simular to classes prop |
| group | false | {} String Boolean Function | Define how to predicate a group row. String type means setting id value with predicate=true. Boolean or Function type means setting predicate value with id='group'. |
| ├ id | false | String | The key in the row item to get the group cell value |
| ├ predicate | false | String Function | Generate a bool value to predicate whether this row is a group row - String: The row item's key that to get the bool value - Function: Call to get the bool value. It's first param is the current row data |
| ├ indent | false | Boolean String | Predicate whether to indent children row or not. Default is true. String type means setting a specific indent style, such as padding-left:2em |
| ├ cell | false | {} String | The group cell component config, same as columns[i].cell |
| ├ colspan | false | Number | The group cell's colspan attribute value. Default behavior is to merge all the column cell |
| picker | false | {} String Boolean | Define the picker column cell. String type means setting component value. Boolean type means whether to show a default picker cell column. |
| ├ id | false | String | The key in the row item to get the picked value |
| ├ component | false | String | The cell component's name |
| ├ classes | false | {} | Define the picker cell's inner dom elements classes, keys is up to the component design |
| ├ styles | false | {} | Define the picker cell's inner dom elements styles, keys is up to the component design |
| ├ ...custom | false | custom | The custom properties for this picker cell component. It is up to the component design |
| id | false | String | The key in row item that use its value to unique table row identity |
| 名称___________ | 要求 | 值类型 | 描述 |
|---|---|---|---|
| 列 | 真正 | [{}] | 定义表格列 |
| ├id | 假 | 串 | 列的ID，这是rows项目中的键 |
| ├标签 | 真正 | 串 | 列的可见文本 |
| ├宽度 | 假 | 串 | 列的宽度，例如'2em' |
| ├儿童 | 假 | [{}] | 子组列。 如果定义此属性，则id和width将被忽略 |
| ├头类 | 假 | 串 | 该列的thead/tr/th元素类，遵循Vue类绑定 |
| ├headerStyle | 假 | 串 | 此列的thead/tr/th元素样式，遵循Vue类绑定 |
| ├类 | 假 | 串 | 此列的tbody/tr/td元素类，遵循Vue类绑定 |
| ├款式 | 假 | 串 | 此列的tbody/tr/td元素样式，遵循Vue类绑定 |
| ├电池 | 假 | {} 串 | 定义单元格自定义， String类型表示设置component值 |
| │├组件 | 假 | 串 | 单元格组件的名称 |
| │├班 | 假 | {} | 定义单元格的内部dom元素类，键取决于组件设计 |
| │├款式 | 假 | {} | 定义单元格的内部dom元素样式，关键取决于组件设计 |
| │├...定制 | 假 | 习俗 | 所有此列的单元格组件的自定义属性。 由组件设计决定 |
| 行数 | 真正 | [{}] | 表的行数据 |
| 类 | 假 | {} | 定义内部dom元素全局类 |
| ├排行 | 假 | 串 | thead / tr类，请遵循Vue类绑定 |
| ├headerCell | 假 | 串 | thead / tr / td类，请遵循Vue类绑定 |
| ├排 | 假 | 串 | tbody / tr类，请遵循Vue类绑定 |
| ├电池 | 假 | 串 | tbody / tr / td类，遵循Vue类绑定 |
| ├组行 | 假 | 串 | 将tbody / tr类分组，遵循Vue类绑定 |
| ├groupCell | 假 | 串 | 组tbody / tr / td类，遵循Vue类绑定 |
| ├桌子 | 假 | 串 | 表类，遵循Vue类绑定 |
| ├剧场 | 假 | 串 | thead类，遵循Vue类绑定 |
| ├身体 | 假 | 串 | tbody类，遵循Vue类绑定 |
| 样式 | 假 | {} | 定义内部dom元素的全局样式，类似于classes prop |
| 组 | 假 | {} 串 布尔型 功能 | 定义如何断言组行。 String类型意味着使用predicate=true设置id值。 Boolean或Function类型意味着将predicate值设置为id='group' 。 |
| ├id | 假 | 串 | 行项目中的键以获取组单元格值 |
| ├谓词 | 假 | 串 功能 | 生成布尔值来确定该行是否为组行 -字符串：获取布尔值的行项目的键 -功能：调用以获取布尔值。 它的第一个参数是当前行数据 |
| ├缩进 | 假 | 布尔型 串 | 确定是否缩进子行。 默认为true。 String类型表示设置特定的缩进样式，例如padding-left:2em |
| ├电池 | 假 | {} 串 | 组单元格组件配置，与columns[i].cell |
| ├科尔斯潘 | 假 | 数 | 组单元格的colspan属性值。 默认行为是合并所有列单元格 |
| 选择器 | 假 | {} 串 布尔型 | 定义选择器列单元格。 String类型表示设置component值。 Boolean类型表示是否显示默认选择器单元列。 |
| ├id | 假 | 串 | 行项目中的键以获取选择的值 |
| ├组件 | 假 | 串 | 单元格组件的名称 |
| ├班 | 假 | {} | 定义选择器单元的内部dom元素类，键取决于组件设计 |
| ├款式 | 假 | {} | 定义选择器单元的内部dom元素样式，键取决于组件设计 |
| ├...定制 | 假 | 习俗 | 此选择器单元组件的自定义属性。 由组件设计决定 |
| ID | 假 | 串 | 行项目中的键，其值用于唯一表行标识 |
发展 (Develop)
复制代码
1
2
3
4yarn install // or npm install yarn run dev // or npm run dev
Use [parcel] to run the development debug.
使用[parcel]运行开发调试。
建立 (Build)
复制代码
1
2yarn run build // or npm run build
Use [rollup] package the component to dist directory.
使用[rollup]将组件打包到dist目录。
用法 (Usage)
示例1：简单列 (Example 1 : Simple Columns)
Js:
Js：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19import table from 'simter-vue-table' new Vue({ el: "#sample", data: { columns: [ { id: "key1", label: "Column1", width: "61px" }, { id: "key2", label: "Column2", width: "62px" }, { id: "key3", label: "Column3", width: "63px" } ], rows: [ { key1: "v1-1", key2: "v2-1", key3: "v3-1" }, { key1: "v1-2", key2: "v2-2", key3: "v3-2" }, { key1: "v1-3", key2: "v2-3", key3: "v3-3" } ] }, components: { "st-table": table } })
Html template:
HTML模板：
复制代码
1<st-table id="#sample" :columns="columns" :rows="rows"></st-table>
Generated html:
生成的html：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<!-- | Column1 | Column2 | Column3 | | v1-1 | v2-1 | v3-1 | | v1-2 | v2-2 | v3-2 | | v1-3 | v2-3 | v3-3 | --> <table> <colgroup> <col style="width: 61px"> <col style="width: 62px"> <col style="width: 63px"> </colgroup> <thead> <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr> </thead> <tbody> <tr><td>v1-1</td><td>v2-1</td><td>v3-1</td></tr> <tr><td>v1-2</td><td>v2-2</td><td>v3-2</td></tr> <tr><td>v1-3</td><td>v2-3</td><td>v3-3</td></tr> </tbody> </table>
示例2：组列 (Example 2 : Group Columns)
Use children key to define the group.
使用children项键定义组。
Js:
Js：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import table from 'simter-vue-table' new Vue({ el: "#sample", data: { columns: [ { id: "key1", label: "Column1", width: "61px" }, { label: "Column2", children: [ { id: "key21", label: "Column21", width: "62px" }, { id: "key22", label: "Column22", width: "63px" } ] } ], rows: [ { key1: "v1-1", key21: "v2-1-1", key22: "v2-2-1" }, { key1: "v1-2", key21: "v2-1-2", key22: "v2-2-2" }, { key1: "v1-3", key21: "v2-1-3", key22: "v2-2-3" } ] }, components: { "st-table": table } })
Html template:
HTML模板：
复制代码
1<st-table id="#sample" :columns="columns" :rows="rows"></st-table>
Generated html:
生成的html：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<!-- | Column1 | Column2 | | | Column21 | Column22 | | v1-1 | v21-1 | v22-1 | | v1-2 | v21-2 | v22-2 | | v1-3 | v21-3 | v22-3 | --> <table> <colgroup> <col style="width: 61px"> <col style="width: 62px"> <col style="width: 63px"> </colgroup> <thead> <tr> <th rowspan="2">Column1</th> <th colspan="2">Column2</th> </tr> <tr> <th>Column21</th> <th>Column22</th> </tr> </thead> <tbody> <tr><td>v1-1</td><td>v21-1</td><td>v22-1</td></tr> <tr><td>v1-2</td><td>v21-2</td><td>v22-2</td></tr> <tr><td>v1-3</td><td>v21-3</td><td>v22-3</td></tr> </tbody> </table>
示例3：复杂组列 (Example 3 : Complex Group Columns)
Use children key to define any level nested group columns.
使用children项键定义任何级别的嵌套组列。
Js:
Js：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30import table from 'simter-vue-table' new Vue({ el: "#sample", data: { columns: [ { id: "key1", label: "Column1", width: "61px" }, { label: "Column2", children: [ { id: "key21", label: "Column21", width: "62px" }, { label: "Column22", children: [ { id: "key221", label: "Column221", width: "63px" }, { id: "key222", label: "Column222", width: "64px" } ] } ] } ], rows: [ { key1: "v1-1", key21: "v21-1", key221: "v221-1", key222: "v222-1" }, { key1: "v1-2", key21: "v21-2", key221: "v221-2", key222: "v222-2" }, { key1: "v1-3", key21: "v21-3", key221: "v221-3", key222: "v222-3" } ] }, components: { "st-table": table } })
Html template:
HTML模板：
复制代码
1<st-table id="#sample" :columns="columns" :rows="rows"></st-table>
Generated html:
生成的html：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54<!-- | Column1 | Column2 | | | Column21 | Column22 | | | | Column221 | Column222 | | v1-1 | v21-1 | v221-1 | v222-1 | | v1-2 | v21-2 | v221-2 | v222-2 | | v1-3 | v21-3 | v221-3 | v222-3 | --> <table> <colgroup> <col style="width: 61px"> <col style="width: 62px"> <col style="width: 63px"> <col style="width: 64px"> </colgroup> <thead> <tr> <th rowspan="3">Column1</th> <th colspan="3">Column2</th> </tr> <tr> <th rowspan="2">Column21</th> <th colspan="2">Column22</th> </tr> <tr> <th>Column221</th> <th>Column222</th> </tr> </thead> <tbody> <tr><td>v1-1</td><td>v21-1</td><td>v221-1</td><td>v222-1</td></tr> <tr><td>v1-2</td><td>v21-2</td><td>v221-2</td><td>v222-2</td></tr> <tr><td>v1-3</td><td>v21-3</td><td>v221-3</td><td>v222-3</td></tr> </tbody> </table>
翻译自: https://vuejsexamples.com/a-vue-component-used-to-generate-html-table-element/
vue表格生成组件
最后
以上就是羞涩季节最近收集整理的关于vue表格生成组件_Vue组件，用于生成HTML表格元素的全部内容，更多相关vue表格生成组件_Vue组件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复