Viog UI

表格 table 待优化 待新增

展示数据用表格

使用说明

简单引入

你需要通过datas传入表格数据，使用table-column组件定义列名,通过--vi-table-td-width变量为每一列定义宽度

vi-table-colum组件value代表datas中列属性名

列1列2列3
nameagesex
展开代码
<template>
  <vi-table :datas="datas">
    <vi-table-column value="0" style="--vi-table-td-width: 140px">列1</vi-table-column>
    <vi-table-column value="1" style="--vi-table-td-width: 80px">列2</vi-table-column>
    <vi-table-column value="2" style="--vi-table-td-width: 100px">列3</vi-table-column>
  </vi-table>
  <vi-table :datas="datas2" style="--vi-table-td-width: 120px">
    <vi-table-column value="name"></vi-table-column>
    <vi-table-column value="age"></vi-table-column>
    <vi-table-column value="sex"></vi-table-column>
  </vi-table>
</template>

<script setup>
    import { reactive } from 'vue'

    const datas = reactive([
        ['数据1', '数据2', '数据3'],
        ['数据4', '数据5', '数据6'],
        ['数据7', '数据8', '数据9']
    ])

    const datas2 = reactive([
        {
            name: 'viog-ui',
            age: '0.5',
            sex: 'else'
        },
        {
            name: 'viog-ui',
            age: '0.5',
            sex: 'else'
        },
        {
            name: 'viog-ui',
            age: '0.5',
            sex: 'else'
        }
    ])
</script>

对齐方式

通过align属性控制表格对齐方式

列1列2列3
展开代码
<template>
  <vi-table :datas="datas" align="center" style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
</template>

样式

通过type属性控制表格样式

列1列2列3
列1列2列3
展开代码
<template>
  <vi-table :datas="datas" align="center" type="three-line" style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
  <vi-table :datas="datas" align="center" type="border" style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
</template>

斑马线

通过属性stripe开启斑马线

列1列2列3
展开代码
<template>
  <vi-table :datas="datas" stripe style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
</template>

hover线

通过属性hover，控制经过行时是否高亮

列1列2列3
展开代码
<template>
  <vi-table :datas="datas" hover style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
</template>

单行选中

通过pick属性开启单行选中模式，在该模式下通过绑定pickValue，配合事件update:pickValue进行单选操作

列1列2列3
展开代码
<template>
  <vi-table :datas="datas" pick
  :pickValue="pick"
  @update:pickValue="(newVal) => pick = newVal"
  style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
</template>

<script setup>
 const pick = ref()
</script>

多行选中

在开启pick属性情况下开启multi属性，开启多行选中

注意，此时pickValue应绑定为数组

列1列2列3
展开代码
<template>
  <vi-table :datas="datas" pick multi
  :pickValue="pickMulti"
  style="--vi-table-td-width: 120px">
    <vi-table-column value="0">列1</vi-table-column>
    <vi-table-column value="1">列2</vi-table-column>
    <vi-table-column value="2">列3</vi-table-column>
  </vi-table>
</template>

<script setup>
 const pickMulti = reactive([])
</script>

Props

table

属性名描述类型默认值

table-column

属性名描述类型默认值

插槽

table

插槽名描述有无默认内容

table-column

插槽名描述有无默认内容

css变量

变量名描述默认值