View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnTable 组件的一些特性和用法。

用法 ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data"/>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
</script>

条纹 (stripe) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data" stripe/>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
</script>

边框 (border) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data" border/>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
</script>

宽度 (width) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data" width="300"/>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
</script>

高度 (height) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data" height="300"/>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
</script>

自定义列 (column) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data">
    <template #actions="{ row, index }">
      <ShadcnButton @click="click(row, index)">Edit</ShadcnButton>
    </template>
  </ShadcnTable>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' },
  { label: 'Actions', key: 'actions', slot: 'actions' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
  
const click = (row: any, index: number) => {
    this.$Message.info({
      content: `Click [ ${row.name} ] - [ ${index} ]`,
    })
}
</script>

固定列 (fixed) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data"/>
</template>

<script setup lang="ts">
  const columns = [
    { label: 'Name', key: 'name', fixed: 'left' },
    { label: 'Address', key: 'address', fixed: 'left' },
    { label: 'Age', key: 'age' }
  ]
  const data = [
    { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
    { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
    { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
    { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
  ]
</script>

多个固定列 (multiple-fixed) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data"/>
</template>

<script setup lang="ts">
const columns = [
    { 'label': 'Name', 'key': 'name', 'width': 100, 'fixed': 'left' },
    { 'label': 'Age', 'key': 'age', 'width': 100, 'fixed': 'left' },
    { 'label': 'Province', 'key': 'province', 'width': 100 },
    { 'label': 'City', 'key': 'city', 'width': 100 },
    { 'label': 'Address', 'key': 'address', 'width': 200 },
    { 'label': 'Postcode', 'key': 'zip', 'width': 100, 'fixed': 'right' },
    { 'label': 'Action', 'key': 'action', 'fixed': 'right', 'width': 160 }
]
const data = [
    { 'name': 'John Brown', 'age': 18, 'address': 'New York No. 1 Lake Park', 'province': 'America', 'city': 'New York', 'zip': 100000 },
    { 'name': 'Jim Green', 'age': 24, 'address': 'Washington, D.C. No. 1 Lake Park', 'province': 'America', 'city': 'Washington, D.C.', 'zip': 100000 },
    { 'name': 'Joe Black', 'age': 30, 'address': 'Sydney No. 1 Lake Park', 'province': 'Australian', 'city': 'Sydney', 'zip': 100000 },
    { 'name': 'Jon Snow', 'age': 26, 'address': 'Ottawa No. 2 Lake Park', 'province': 'Canada', 'city': 'Ottawa', 'zip': 100000 }
]
</script>

列宽度 (width) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data"/>    
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name', width: 100 },
  { label: 'Address', key: 'address', width: 200 },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]
</script>

行点击 (on-row-click) ​

查看代码
vue
<template>
  <ShadcnTable :columns="columns" :data="data" @on-row-click="rowClick"/>
</template>

<script setup lang="ts">
const columns = [
  { label: 'Name', key: 'name' },
  { label: 'Address', key: 'address' },
  { label: 'Age', key: 'age' }
]
const data = [
  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
]

const rowClick = (row: any, index: number) => {
    this.$Message.info({
      content: `Click [ ${row.name} ] - [ ${index} ]`,
    })
}
</script>

表格 (Table) 属性 ​

列 (Column) 属性 ​

表格 (Table) 事件 ​