knot vuetable
基本使用
| 姓名 | 性别 | 年龄 |
|---|---|---|
| lh | 男 | 19 |
| fxh | 男 | 19 |
| hss | 女 | 19 |
vue
<template>
<kn-table :columns="columns" :dataSource="dataSource" />
</template>
<script setup lang="ts">
import { KnTable } from 'knot-vue'
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center',
},
{
title: '性别',
dataIndex: 'sex',
key: 'sex',
align: 'center',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
align: 'center',
},
]
const dataSource = [
{
name: 'lh',
sex: '男',
age: 19,
},
{
name: 'fxh',
sex: '男',
age: 19,
},
{
sex: '女',
name: 'hss',
age: 19,
},
]
</script>带边框
| 姓名 | 性别 | 年龄 |
|---|---|---|
| lh | 男 | 19 |
| fxh | 男 | 19 |
| hss | 女 | 19 |
vue
<template>
<kn-table :columns="columns" :dataSource="dataSource" border />
</template>
<script setup lang="ts">
import { KnTable } from 'knot-vue'
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center',
},
{
title: '性别',
dataIndex: 'sex',
key: 'sex',
align: 'center',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
align: 'center',
},
]
const dataSource = [
{
name: 'lh',
sex: '男',
age: 19,
},
{
name: 'fxh',
sex: '男',
age: 19,
},
{
sex: '女',
name: 'hss',
age: 19,
},
]
</script>插槽
| 姓名 | 性别 | 年龄 |
|---|---|---|
lh | 男 | 19 |
fxh | 男 | 19 |
hss | 女 | 19 |
vue
<template>
<kn-table :columns="columns" :dataSource="dataSource">
<template #name="{ row }">
<div style="color:red">
{{ row.name }}
</div>
</template>
</kn-table>
</template>
<script setup lang="ts">
import { KnTable } from 'knot-vue'
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center',
},
{
title: '性别',
dataIndex: 'sex',
key: 'sex',
align: 'center',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
align: 'center',
},
]
const dataSource = [
{
name: 'lh',
sex: '男',
age: 19,
},
{
name: 'fxh',
sex: '男',
age: 19,
},
{
sex: '女',
name: 'hss',
age: 19,
},
]
</script>API
| 属性名 | 描述 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| columns | 表格列名 | Column[] 见下表 | true | -- |
| dataSource | 表格数据 | 对应Column的key | true | -- |
Column
| 属性名 | 描述 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| title | 列名 | string | true | -- |
| dataIndex | 列索引 | string | true | -- |
| key | 列对应字段 | string | true | -- |
| align | 对齐方式 | string | false | center |
API
| 属性名 | 描述 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| columns | 表格列名 | Column[] 见下表 | true | -- |
| dataSource | 表格数据 | 对应Column的key | true | -- |