View Shadcn UI

Appearance

介绍 ​


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

用法 ​

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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 :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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 :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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" :dark="darkMode">
    <template #actions="{ row, index }">
      <ShadcnButton @click="click(row, index)" :dark="darkMode">Edit</ShadcnButton>
    </template>
  </ShadcnTable>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

  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" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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" :dark="darkMode" />    
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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>

液态玻璃效果 (glass) ​

查看代码
vue
<template>
  <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
    <div class="p-8 rounded-lg bg-white/50">
      <ShadcnTable :columns="columns" :data="data" glass :dark="darkMode" border stripe />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

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>

表格 (Table) 属性 ​

列 (Column) 属性 ​

表格 (Table) 事件 ​