Table 表格

● 基本使用

table 表格基本使用示例,需要一个主要的 options 参数。

ID	姓名	职业	地址	籍贯
1	张三	UI	组一	云南
2	李四	前端	组二	新疆
3	王五	后端	组三	海南
4	老杨	测试	组四	西藏

展示代码

vue

<template>
 <k-table :options="options"></k-table>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
const state = reactive({
options:{
  fileds:[
    {field:'id',title:'ID',align:'center'},
    {field:'name',title:'姓名',align:'center'},
    {field:'job',title:'职业',align:'center'},
    {field:'address',title:'地址',align:'center'},
    {field:'from',title:'籍贯',align:'center'}
  ],
  datas:[
    {id:1,name:'张三',job:'UI',address:'组一',from:"云南"},
    {id:2,name:'李四',job:'前端',address:'组二',from:"新疆"},
    {id:3,name:'王五',job:'后端',address:'组三',from:"海南"},
    {id:4,name:'老杨',job:'测试',address:'组四',from:"西藏"},
  ]
},
});
const { options } = state;
</script>

● 不同大小

你可以传入一个 size 来确定表格的不同大小，以适配不同的应用场景

small

ID	姓名	职业	地址	籍贯
1	张三	UI	组一	云南
2	李四	前端	组二	新疆
3	王五	后端	组三	海南
4	老杨	测试	组四	西藏

mini

ID	姓名	职业	地址	籍贯
1	张三	UI	组一	云南
2	李四	前端	组二	新疆
3	王五	后端	组三	海南
4	老杨	测试	组四	西藏

展示代码

vue

<template>
  <h4>small</h4>
  <k-table :options="options" size="small"></k-table>
  <h4>mini</h4>
  <k-table :options="options" size="mini"></k-table>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
const state = reactive({
  options: {
    fileds: [
      { field: "id", title: "ID", align: "center" },
      { field: "name", title: "姓名", align: "center" },
      { field: "job", title: "职业", align: "center" },
      { field: "address", title: "地址", align: "center" },
      { field: "from", title: "籍贯", align: "center" },
    ],
    datas: [
   {id:1,name:'张三',job:'UI',address:'组一',from:"云南"},
    {id:2,name:'李四',job:'前端',address:'组二',from:"新疆"},
    {id:3,name:'王五',job:'后端',address:'组三',from:"海南"},
    {id:4,name:'老杨',job:'测试',address:'组四',from:"西藏"},
    ],
  },
});
const { options } = state;
</script>

● Attributes 参数

参数	说明	类型	可选值	默认值
size	尺寸	string	small / mini /default	—
type	类型	string	text	—
def	默认值	string	—	default
attr	属性	string	options/size	—

Table 表格 #

● 基本使用 #

● 不同大小 #

small

mini

● Attributes 参数 #

Table 表格

● 基本使用

● 不同大小

● Attributes 参数