VEUI

VEUI on GitHub
Play!中文

Table

Examples

Density variants

Available ui size props: compact / loose.

Density

Size

ID
Name
Bid
Last updated
Operations
3154
Steve Rogers
¥1024.00
2013-11-17
3155
Thor Odinson
¥598.00
2014-02-14
3156
Tony Stark
¥820.00
2017-06-10
3157
Stephen Strange
¥736.00
2018-01-09
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Density</h4>
    <veui-radio-group
      v-model="density"
      :items="[
        { label: 'Compact', value: 'compact' },
        { label: 'Normal', value: 'normal' },
        { label: 'Loose', value: 'loose' }
      ]"
    />
  </section>
  <section>
    <h4>Size</h4>
    <veui-radio-group
      v-model="size"
      :items="[
        { label: 'Medium', value: 'm' },
        { label: 'Small', value: 's' }
      ]"
    />
  </section>
  <section>
    <veui-table
      :ui="ui"
      :data="data"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="operation"
        title="Operations"
      >
        <template #default="{ index }">
          <veui-button
            ui="text"
            @click="remove(index)"
          >
            Remove
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, RadioGroup, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-radio-group': RadioGroup,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      density: 'normal',
      size: 'm',
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        }
      ]
    }
  },
  computed: {
    ui () {
      return `${this.density} ${this.size}`
    }
  },
  methods: {
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Selecting and sorting

Allows customization of unique keys, selection modes, and sorting.

ID
Group
Name
Bid
Last updated
Opertaions
3154
1577
Steve Rogers
¥1024.00
2013-11-17
3155
Thor Odinson
¥598.00
2014-02-14
3156
1578
Tony Stark
¥820.00
2017-06-10
3157
Stephen Strange
¥736.00
2018-01-09

Selected: ["1577"]

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-button
      ui="primary"
      @click="append"
    >
      Add
    </veui-button>
  </section>
  <section>
    <veui-checkbox
      v-model="mode"
      class="checkbox"
      true-value="multiple"
      false-value="single"
    >
      Multiple selection
    </veui-checkbox>
    <veui-checkbox
      v-model="showOps"
      class="checkbox"
    >
      Display “Operations”
    </veui-checkbox>
    <veui-checkbox
      v-model="selectSpanRow"
      class="checkbox"
    >
      Select by “Group” <small>(instead of “ID”)</small>
    </veui-checkbox>
  </section>
  <section>
    <veui-table
      :data="data"
      :key-field="selectSpanRow ? 'group' : 'id'"
      selectable
      :select-mode="mode"
      :order-by="orderBy"
      :order="order"
      :selected.sync="selected"
      @sort="handleSort"
    >
      <veui-table-column
        field="id"
        title="ID"
        sortable
      >
        <template #head>
          <strong>ID</strong>
        </template>
        <template #foot>
          <strong>Total</strong>
        </template>
      </veui-table-column>
      <veui-table-column
        field="group"
        title="Group"
        :span="groupSpan"
      />
      <veui-table-column
        field="name"
        title="Name"
        width="160"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        sortable
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
        <template #foot>
          <strong>{{ total | currency }}</strong>
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ id, updateDate }">
          <span :ref="`time-a-${id}`">{{ updateDate | date }}</span>
          <veui-tooltip :target="`time-a-${id}`">
            {{ updateDate | time }}
          </veui-tooltip>
        </template>
      </veui-table-column>
      <veui-table-column
        v-if="showOps"
        field="operation"
        title="Opertaions"
      >
        <template #default="{ index }">
          <veui-button
            ui="text"
            @click="del(index)"
          >
            Remove
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
    <p>Selected: {{ JSON.stringify(selected) }}</p>
  </section>
</article>
</template>

<script>
import { groupBy } from 'lodash'
import { Button, Checkbox, Table, Column, Tooltip } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-tooltip': Tooltip,
    'veui-checkbox': Checkbox
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    },
    time (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-') + ' 00:00:00'
    }
  },
  data () {
    return {
      mode: 'multiple',
      showOps: true,
      selectSpanRow: true,
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117',
          group: '1577'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214',
          group: '1577'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610',
          group: '1578'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109',
          group: '1578'
        }
      ],
      nextId: 3158,
      nextIndex: 4,
      order: false,
      orderBy: null,
      selected: ['1577'],
      groupSpan: i => {
        let groups = groupBy(this.data, 'group')
        let item = this.data[i]
        let itemGroup = groups[item.group]
        if (item.id === (itemGroup[0] || {}).id) {
          return {
            row: itemGroup.length
          }
        }
        return {
          row: 0
        }
      }
    }
  },
  computed: {
    total () {
      return this.data.reduce((total, item) => {
        return total + item.bid
      }, 0)
    }
  },
  methods: {
    del (index) {
      this.data.splice(index, 1)
    },
    append () {
      let d = new Date(Date.now() + Math.floor(Math.random() * 1e10))

      let item = {
        id: String(this.nextId),
        group: String(Math.floor(this.nextId / 2)),
        name: `Character-${this.nextIndex}`,
        bid: Math.floor(Math.random() * 1280),
        updateDate:
          d.getFullYear() +
          String(d.getMonth() + 1).padStart(2, '0') +
          String(d.getMonth() + 1).padStart(2, '0')
      }
      this.nextId++
      this.nextIndex++
      this.data.push(item)
    },
    handleSort (orderBy, order) {
      this.orderBy = orderBy
      this.order = order
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

.checkbox {
  margin-right: 20px;
}
</style>

Filtering

Use the filter slot of the Column component to enable custom filtering.

Layout

ID
Name
Bid
Last updated
Operations
3154
Steve Rogers
¥1024.00
2013-11-17
3155
Thor Odinson
¥598.00
2014-02-14
3156
Tony Stark
¥820.00
2017-06-10
3157
Stephen Strange
¥736.00
2018-01-09

You can use the ui prop value crowded to hide filter button by default when there are too many columns to be displayed.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Layout</h4>
    <veui-checkbox
      v-model="crowded"
      class="checkbox"
    >
      Crowded layout
    </veui-checkbox>
  </section>
  <section>
    <veui-table
      :ui="crowded ? 'crowded' : null"
      :data="filteredData"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
        :filter-value="filtered || null"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
        <template #filter="{ close }">
          <veui-checkbox
            v-model="filtered"
            class="checkbox"
          >
            &gt;800
          </veui-checkbox>
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="operation"
        title="Operations"
      >
        <template #default="{ index }">
          <veui-button
            ui="text"
            @click="remove(index)"
          >
            Remove
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, Checkbox, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-checkbox': Checkbox,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        }
      ],
      crowded: false,
      filtered: null
    }
  },
  computed: {
    filteredData () {
      if (!this.filtered) {
        return this.data
      }
      return this.data.filter(({ bid }) => bid > 800)
    }
  },
  methods: {
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.checkbox {
  margin: 8px 16px;
}

section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Internal scrolling

Allows enabling of internal scrolling mode to achieve a fixed table header and footer effect.

ID
Name
Bid
Last updated
3154
Steve Rogers
¥1024.00
2013-11-17
3155
Thor Odinson
¥598.00
2014-02-14
3156
Tony Stark
¥820.00
2017-06-10
3157
Stephen Strange
¥736.00
2018-01-09
3158
Natalie Romanoff
¥736.00
2018-01-23
3159
Bruce Banner
¥736.00
2018-12-01
3160
Peter Parker
¥736.00
2018-11-13
3161
T'Challa
¥736.00
2018-07-30
3162
Loki
¥736.00
2018-06-01
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-table
      :data="data"
      scroll="360"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        },
        {
          id: '3158',
          name: 'Natalie Romanoff',
          bid: 736,
          updateDate: '20180123'
        },
        {
          id: '3159',
          name: 'Bruce Banner',
          bid: 736,
          updateDate: '20181201'
        },
        {
          id: '3160',
          name: 'Peter Parker',
          bid: 736,
          updateDate: '20181113'
        },
        {
          id: '3161',
          name: "T'Challa",
          bid: 736,
          updateDate: '20180730'
        },
        {
          id: '3162',
          name: 'Loki',
          bid: 736,
          updateDate: '20180601'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Fixed columns

Use the scroll prop of the Table component and the fixed prop of the Column component to control the position of fixed columns.

ID
Characters
Bid
Last updated
Operations
Name
Title
3154
Steve Rogers
Captain America
¥1024.00
2013-11-17
3155
Thor Odinson
God of Thunder
¥598.00
2014-02-14
3156
Tony Stark
Ironman
¥820.00
2017-06-10
3157
Stephen Strange
Doctor Strange
¥736.00
2018-01-09

The width prop must be specified for fixed columns.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-table
    :data="data"
    key-field="id"
    :scroll="{ x: 800 }"
  >
    <veui-table-column
      field="id"
      title="ID"
      width="80"
      fixed="left"
    />
    <veui-table-column title="Characters">
      <veui-table-column
        field="name"
        title="Name"
        width="200"
      />
      <veui-table-column
        field="title"
        title="Title"
        width="200"
      />
    </veui-table-column>
    <veui-table-column
      field="bid"
      title="Bid"
      width="160"
      align="right"
    >
      <template #default="{ bid }">
        {{ bid | currency }}
      </template>
    </veui-table-column>
    <veui-table-column
      field="updateDate"
      title="Last updated"
      align="center"
      width="200"
    >
      <template #default="{ updateDate }">
        {{ updateDate | date }}
      </template>
    </veui-table-column>
    <veui-table-column
      field="operation"
      title="Operations"
      width="140"
      fixed="right"
    >
      <template #default="{ index }">
        <veui-button
          ui="text"
          @click="remove(index)"
        >
          Remove
        </veui-button>
      </template>
    </veui-table-column>
  </veui-table>
</article>
</template>

<script>
import { Table, Column, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          title: 'Captain America',
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          title: 'God of Thunder',
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          title: 'Ironman',
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          title: 'Doctor Strange',
          updateDate: '20180109'
        }
      ]
    }
  },
  methods: {
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Expandable rows

Supports expanding rows with child data.

ID
Name
Bid
Last updated
3154
Steve Rogers
¥1024.00
2013-11-17
3155
Thor Odinson
¥598.00
2014-02-14
3156
Tony Stark
¥820.00
2017-06-10
3157
Stephen Strange
¥736.00
2018-01-09
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-table
      :data="data"
      expandable
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117',
          children: [
            {
              id: '3154',
              name: 'Steve Rogers',
              bid: 1024,
              updateDate: '20131117'
            },
            {
              id: '3154',
              name: 'Steve Rogers',
              bid: 1001,
              updateDate: '20131116'
            },
            {
              id: '3154',
              name: 'Steve Rogers',
              bid: 985,
              updateDate: '20131115'
            }
          ]
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214',
          children: [
            {
              id: '3155',
              name: 'Thor Odinson',
              bid: 520,
              updateDate: '20131116'
            }
          ]
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610',
          children: [
            {
              id: '3156',
              name: 'Tony Stark',
              bid: 800,
              updateDate: '20131116'
            },
            { id: '3156', name: 'Tony Stark', bid: 763, updateDate: '20131115' }
          ]
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109',
          children: [
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 704,
              updateDate: '20131116'
            },
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 666,
              updateDate: '20131112'
            },
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 521,
              updateDate: '20131111'
            },
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 428,
              updateDate: '20131110'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Header description

Use the desc prop or desc slot of the Column component to add description information to the table header.

ID
Name
Bid
31541
Steve Rogers
¥1024.00
31552
Thor Odinson
¥598.00
31563
Tony Stark
¥820.00
31574
Stephen Strange
¥736.00
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-table
      :data="data"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
        :desc="nameDesc"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
        <template #desc="{ close }">
          <p>This is a description for bid.</p>
          <veui-button @click="close">
            close
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    }
  },
  data () {
    return {
      data: [
        {
          id: '31541',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '31552',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '31563',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '31574',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        }
      ],
      nameDesc: 'This is a description for name.'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Sorting

Use the order prop and order-by prop to specify the sorting state on the table header.

Listen for the sort event to handle changes in sorting state.

Set the allowed-orders prop to customize the allowed sorting states.

ID
Name
Bid
31541
Steve Rogers
¥1024.00
31552
Thor Odinson
¥598.00
31563
Tony Stark
¥820.00
31574
Stephen Strange
¥736.00
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <div>
      <veui-checkbox
        v-model="allowFalse"
        @change="handleChange"
      >
        Allow unordered
      </veui-checkbox>
    </div>
    <veui-table
      :data="sorted"
      key-field="id"
      :order="order"
      :order-by="orderBy"
      :allowed-orders="allowedOrders"
      @sort="handleSort"
    >
      <veui-table-column
        field="id"
        title="ID"
        sortable
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
        sortable
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, Checkbox } from 'veui'

let data = [
  {
    id: '31552',
    name: 'Thor Odinson',
    bid: 598,
    updateDate: '20140214'
  },
  {
    id: '31541',
    name: 'Steve Rogers',
    bid: 1024,
    updateDate: '20131117'
  },
  {
    id: '31563',
    name: 'Tony Stark',
    bid: 820,
    updateDate: '20170610'
  },
  {
    id: '31574',
    name: 'Stephen Strange',
    bid: 736,
    updateDate: '20180109'
  }
]

let allowedOrders = [false, 'desc', 'asc']

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-checkbox': Checkbox
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    }
  },
  data () {
    return {
      order: 'asc',
      orderBy: 'id',
      allowFalse: true
    }
  },
  computed: {
    sorted () {
      let result = data.slice(0)
      if (this.order) {
        const sign = this.order === 'desc' ? -1 : 1
        result.sort((a, b) => {
          return sign * (+a[this.orderBy] - +b[this.orderBy])
        })
      }
      return result
    },
    allowedOrders () {
      let result = allowedOrders.slice(0)
      return this.allowFalse ? result : result.filter(item => item)
    }
  },
  methods: {
    handleSort (field, order) {
      this.order = order
      this.orderBy = field
    },
    handleChange (val) {
      // 不允许不排序时,当前却是不排序,随便改下
      if (!val && !this.order) {
        this.order = 'desc'
      }
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Loading

Use the loading prop to specify that the table is in a loading state. Use loading-options to specify the style of the loading state.

ID
Name
Bid
31552
Thor Odinson
¥598.00
31541
Steve Rogers
¥1024.00
31563
Tony Stark
¥820.00
31574
Stephen Strange
¥736.00
Edit this demo on GitHubEdit
<template>
<article>
  <section class="settings">
    <veui-switch
      v-model="loading"
      ui="s"
    >
      Loading
    </veui-switch>
    <veui-switch
      v-model="noData"
      ui="s"
      :disabled="spinner"
    >
      No data
    </veui-switch>
    <veui-switch
      v-model="modal"
      ui="s"
    >
      Modal
    </veui-switch>
    <veui-switch
      v-model="spinner"
      ui="s"
    >
      Use spinner
    </veui-switch>
  </section>
  <veui-table
    :data="noData ? [] : data"
    :loading="loading"
    :loading-options="{ type: spinner ? 'spinner' : 'bar', modal }"
    key-field="id"
  >
    <veui-table-column
      field="id"
      title="ID"
      sortable
    />
    <veui-table-column
      field="name"
      title="Name"
    />
    <veui-table-column
      field="bid"
      title="Bid"
      width="160"
      align="right"
      sortable
    >
      <template #default="{ bid }">
        {{ bid | currency }}
      </template>
    </veui-table-column>
  </veui-table>
</article>
</template>

<script>
import { Table, Column, Switch } from 'veui'

let data = [
  {
    id: '31552',
    name: 'Thor Odinson',
    bid: 598,
    updateDate: '20140214'
  },
  {
    id: '31541',
    name: 'Steve Rogers',
    bid: 1024,
    updateDate: '20131117'
  },
  {
    id: '31563',
    name: 'Tony Stark',
    bid: 820,
    updateDate: '20170610'
  },
  {
    id: '31574',
    name: 'Stephen Strange',
    bid: 736,
    updateDate: '20180109'
  }
]

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-switch': Switch
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    }
  },
  data () {
    return {
      data,
      noData: false,
      loading: true,
      modal: true,
      spinner: false
    }
  }
}
</script>

<style lang="less" scoped>
.settings {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Truncation tooltip

Use the tooltip prop of the Column component to specify a hover tooltip when content is truncated.

ID
Name
Description
3154
Steve Rogers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.
3155
Thor Odinson
Lorem ipsum.
3156
Tony Stark
Lorem ipsum.
3157
Stephen Strange
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.
Edit this demo on GitHubEdit
<template>
<article>
  <veui-table
    :data="data"
    key-field="id"
  >
    <veui-table-column
      field="id"
      title="ID"
    />
    <veui-table-column
      field="name"
      title="Name"
    />
    <veui-table-column
      field="desc"
      title="Description"
      tooltip
    />
  </veui-table>
</article>
</template>

<script>
import { Table, Column } from 'veui'

const long = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.'
const short = 'Lorem ipsum.'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column
  },
  data () {
    return {
      density: 'normal',
      size: 'm',
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          desc: long
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          desc: short
        },
        {
          id: '3156',
          name: 'Tony Stark',
          desc: short
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          desc: long
        }
      ]
    }
  }
}
</script>

Table

API

Props

NameTypeDefaultDescription
uistring-

Preset style.

ValueDescription
compactCompact style.
looseLoose style.
sSmall size style.
mMedium size style.
dataArray<Object>-Table data.
key-fieldstring-Specifies the column identifier that serves as the table data. The value corresponds to the name of a field in the data property of a data item. The value of the corresponding field will be output as the row element's key property. When the selectable property is true, it can also be used to specify which column's different rows to select in the presence of vertically merged cells. In this case, the value must come from the field property of an internal Column component.
selectablebooleanfalseWhether to enable row selection.
select-modestring'multiple'The selection mode, with supported values of single / multiple, corresponding to single/multiple selection modes.
selectedArray<*>|*[]

.sync

Selected rows. When the select-mode property is 'multiple', it is an array of values corresponding to the key-field of the selected rows. When the select-mode property is 'single', it is the value of the key-field of the selected row.

expandablebooleanfalseWhether to allow row expansion.
expandedArray<*>[]

.sync

Expanded rows. It is an array of values corresponding to the key-field of the expanded rows.

orderstring | booleanfalseThe order of sorting. When false, it indicates unordered, and when a string value of 'asc' / 'desc', it indicates ascending / descending order respectively.
order-bystring-Specifies the column that the current sorting is based on, and the value must come from the field property of an internal Column component.
scrollnumber-Specifies the maximum height of the scroll area. When exceeded, the table will enter a mode where only the data area is allowed to scroll with fixed headers and footers.
loadingbooleanfalseSpecifies whether the table is in the loading state.
loading-optionsObjecttable.loadingOptions

The configuration of the loading state, with a type of {type, modal}.

NameTypeDescription
type'bar' \| 'spinnerThe loading type, with a default value of 'bar', which indicates the loading bar style.
modalbooleanThe loading mask, which can only be configured as false when type is bar.
allowed-ordersArray[false, 'desc', 'asc']

Specifies the sorting range of columns at the table level.

ValueDescription
falseNo sorting.
'asc'Ascending order.
'desc'Descending order.
borderedbooleanfalseSpecifies whether the table has a border.
column-filterArray<string> | (field: string) => boolean-Used for filtering the columns of the table. When passed an array, the values of the elements are the field values corresponding to that column. When passed a function, the parameter is the field value corresponding to that column, and the return value indicates whether that column should be displayed. By default, all columns are displayed.

Slots

NameDescription
defaultUsed to define table columns and can only contain Column components.
no-dataUsed to define the content to display when there is no data.
footThe content in the table footer, and the entire area will be opened as a container without maintaining column separation.
sub-row

The content of the child row that appears after a row is expanded. When using this slot, the content will be displayed as the child row content that spans the entire bottom of the expanded row. When using this slot, it will override the sub-row slot content of the Column.

The slot parameters are all fields in the current row data of data and the corresponding index value index.

Edit this page on GitHubEdit
© Baidu, Inc. 2024