Elin-UI

Appearance

Table ​

用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。

基础用法 ​

姓名
日期
地址
Tom
2016-05-03
No. 189, Grove St, Los Angeles
Tom
2016-05-02
No. 189, Grove St, Los Angeles
Tom
2016-05-04
No. 189, Grove St, Los Angeles
查看代码
vue
<template>
  <e-table :data :columns />
</template>

<script lang="tsx" setup>
import type { tableColumns } from 'elin-ui'

const data = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const columns: tableColumns = [
  {
    label: '姓名',
    prop: 'name',
    width: 150
  },
  {
    label: '日期',
    prop: 'date',
    width: 150
  },
  {
    label: '地址',
    prop: 'address'
  }
]
</script>

固定列 ​

姓名
年龄
日期
地址
操作
Tom
20
2016-05-03
No. 189, Grove St, Los Angeles
John
25
2016-05-02
No. 189, Grove St, Los Angeles
Tony
30
2016-05-04
No. 189, Grove St, Los Angeles
Amy
18
2016-05-01
No. 189, Grove St, Los Angeles
查看代码
vue
<template>
  <e-table :data="tableData" :columns="columns"> </e-table>
</template>

<script lang="tsx" setup>
import type { tableColumns } from 'elin-ui'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    age: 20
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
    age: 25
  },
  {
    date: '2016-05-04',
    name: 'Tony',
    address: 'No. 189, Grove St, Los Angeles',
    age: 30
  },
  {
    date: '2016-05-01',
    name: 'Amy',
    address: 'No. 189, Grove St, Los Angeles',
    age: 18
  }
]

const columns: tableColumns = [
  {
    label: '姓名',
    prop: 'name',
    width: 120,
    fixed: 'left'
  },
  {
    label: '年龄',
    prop: 'age',
    width: 100
  },
  {
    label: '日期',
    prop: 'date',
    width: 180
  },
  {
    label: '地址',
    prop: 'address',
    width: 200
  },
  {
    label: '操作',
    width: 150,
    fixed: 'right',
    formatter: ({ val, row, index }) => {
      return (
        <>
          <e-button text type="primary" size="small">
            修改
          </e-button>
          <e-Button text type="danger" size="small">
            删除
          </e-Button>
        </>
      )
    }
  }
]
</script>