vue表格生成组件_Vue组件，用于生成HTML表格元素

vue表格生成组件

Vue组件模拟器表 (Vue Component simter-vue-table)

A Vue component used to generate HTML table element.

Vue组件，用于生成HTML表格元素。

Options:

选项：

发展 (Develop)

yarn install
// or npm install
yarn run dev
// or npm run dev

Use [parcel] to run the development debug.

使用[parcel]运行开发调试。

建立 (Build)

yarn run build
// or npm run build

Use [rollup] package the component to dist directory.

使用[rollup]将组件打包到dist目录。

用法 (Usage)

示例1：简单列 (Example 1 : Simple Columns)

Js:

Js：

import 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模板：

<st-table id="#sample" :columns="columns" :rows="rows"></st-table>

Generated html:

生成的html：

<!--
| 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：

import 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模板：

<st-table id="#sample" :columns="columns" :rows="rows"></st-table>

Generated html:

生成的html：

<!--
| 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：

import 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模板：

<st-table id="#sample" :columns="columns" :rows="rows"></st-table>

Generated html:

生成的html：

<!--
| 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表格生成组件