vant-table

The table component for vant-ui

docs

Referrence

• https://www.ui.cn/detail/432164

Usage

<script setup>
const highlightIndex = ref(-1)
const columns = shallowRef([
  {
    prop: 'key1',
    title: 'Title1',
    minWidth: '100px',
    sortable: true,
    filterable: true,
    fixed: 'left',
    cellClass: 'test',
    thCellClass: 'thclass',
    tdCellClass: 'tdClass',
  },
  {
    prop: 'key2',
    title: 'Title2',
    minWidth: '160px',
    width: '100px',
    sortable: true,
  },
  {
    prop: 'key3',
    title: 'Title3',
    minWidth: '150px',
    width: '250px',
    sortable: true,
    filterable: true,
  },
  {
    prop: 'key31',
    title: 'Title31',
    minWidth: '150px',
    width: '250px',
    sortable: true,
    filterable: true,
  },
  {
    prop: 'key32',
    title: 'Title32',
    minWidth: '150px',
    width: '250px',
    sortable: true,
    filterable: true,
  },
  {
    prop: 'key33',
    title: 'Title33',
    minWidth: '150px',
    width: '250px',
    sortable: true,
    filterable: true,
    renderThCell: (h, { row }) => h('span', 'Title2333'),
    renderCell: (h, { row, rowIndex, column, columnIndex }) => h('span', 'Hello World!'),
  },
  {
    prop: 'key4',
    title: 'Title4',
    width: '100px',
    sortable: true,
    fixed: 'right',
  },
])
const data = Array.from(new Array(20), () => {
  return {
    id: Math.random(),
    key1: 'Column1',
    key2: 'Column2',
    key3: 'Column3',
    key31: 'Column31',
    key32: 'Column32',
    key4: 'Column4',
    key5: 'Column5',
    key455: 'Column455',
    key566: 'Column566',
    key666: 'Column666',
    key777: 'Column777',
    key888: 'Column888',
    key999: 'Column999',
    key22333: 'Column2333',
  }
})

function rowClick({ rowIndex }) {
  highlightIndex.value = rowIndex
}
</script>

<template>
  <vant-table
    :columns="columns"
    :data="data"
    :height="350"
    :highlight-index="highlightIndex"
    rowClickable
    @row-click="rowClick"
  ></vant-table>
</template>

under (c) MIT License, see LICENSE. By fuck-quanbu.