VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Table 表格

示例

内容密度

可供选用的 ui 尺寸属性值：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
在 GitHub 上编辑此示例编辑
<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>

选择模式与排序

允许自定义唯一键、设定选择模式以及进行排序。

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"]

在 GitHub 上编辑此示例编辑
<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>

筛选

使用 Column 组件的 filter 插槽来开启自定义筛选功能。

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

可以使用 crowded 这个 ui 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。

在 GitHub 上编辑此示例编辑
<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>

内部滚动

允许启用内部滚动模式，以达到固定表头表底的效果。

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
在 GitHub 上编辑此示例编辑
<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>

固定列

使用 Table 的 scroll 属性及 Column 组件的 fixed 属性来控制固定列的位置。

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

在固定列模式下，必须为被固定的列指定 width 属性。

在 GitHub 上编辑此示例编辑
<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>

展开行

支持将带有子数据的行进行展开。

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
在 GitHub 上编辑此示例编辑
<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>

表头描述

使用 Column 组件的 desc 属性或 desc 插槽来为表头增加描述信息。

ID
Name
Bid
31541
Steve Rogers
¥1024.00
31552
Thor Odinson
¥598.00
31563
Tony Stark
¥820.00
31574
Stephen Strange
¥736.00
在 GitHub 上编辑此示例编辑
<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>

排序

使用 order 属性和 order-by 属性来指定表头上的排序状态。

监听 sort 事件来处理排序状态的变化。

设置 allowed-orders 属性来自定义允许的排序状态。

ID
Name
Bid
31541
Steve Rogers
¥1024.00
31552
Thor Odinson
¥598.00
31563
Tony Stark
¥820.00
31574
Stephen Strange
¥736.00
在 GitHub 上编辑此示例编辑
<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 属性来指定表格处于加载状态。使用 loading-options 来指定加载态的样式。

ID
Name
Bid
31552
Thor Odinson
¥598.00
31541
Steve Rogers
¥1024.00
31563
Tony Stark
¥820.00
31574
Stephen Strange
¥736.00
在 GitHub 上编辑此示例编辑
<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>

截断提示

使用 Column 组件的 tooltip 属性来指定在内容截断时显示悬浮提示。

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.
在 GitHub 上编辑此示例编辑
<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>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
compact紧凑样式。
loose宽松样式。
s小尺寸样式。
m中尺寸样式。
dataArray<Object>-表格数据。
key-fieldstring-用于指定充当表格数据的键的列标志符。值对应 data 属性中数据项的某个字段名称。对应字段的值则会作为行元素的 key 属性输出。当 selectable 属性为 true 时，也可以用来指定在存在纵向合并单元格的情况下以哪一列的不同行作为选择项，此时值必须来自内部某个 Column 组件的 field 属性。
selectablebooleanfalse是否支持表格行的选择。
select-modestring'multiple'选择模式，支持的值为 single / multiple，分别对应于单选/多选模式。
selectedArray<*>|*[]

.sync

已选行。当 select-mode 属性为 'multiple' 时为已选行 key-field 对应字段值的数组；为 'single' 时为已选行 key-field 对应字段值。

expandablebooleanfalse是否允许展开行。
expandedArray<*>[]

.sync

已展开行。为已展开行 key-field 对应字段值的数组。

orderstring | booleanfalse排序顺序。为 false 时表示无序，为字符串值 'asc' / 'desc' 时分别为升序/降序。
order-bystring-用于指定当前基于哪一列进行了排序，值必须来自内部某个 Column 组件的 field 属性。
scrollnumber-指定滚动区域的最大高度，当超出此高度时，表格将进入固定表头和底部只允许数据区域滚动的模式。
loadingbooleanfalse指定表格是否处于加载状态。
loading-optionsObjecttable.loadingOptions

加载中状态的配置，类型为 {type, modal}。

名称类型描述
type'bar' \| 'spinner加载类型，默认为 'bar'，即加载条样式。
modalboolean加载遮罩，仅在 type 为 bar 时允许配置 false 进行关闭。
allowed-ordersArray[false, 'desc', 'asc']

在表格层级指定列的排序范围。

值描述
false不排序。
'asc'升序。
'desc'降序。
borderedbooleanfalse指定表格是否有边框。
column-filterArray<string>-用于过滤表格的列，元素的值应该是列的 key-field，默认全部列都显示出来。

插槽

名称描述
default用于定义表格列，只能包含 Column 组件。
no-data用于定义无数据时要展现的内容。
foot表格脚部内容，整个区域将打通成为一个容器，不再保留分列。
sub-row

展开行后子行的内容。使用此插槽时，内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 Column 的 sub-row 插槽内容。

插槽参数为 data 内当前行数据中的所有字段，以及当前行对应索引值 index。

事件

名称描述
select

切换已选项时触发。回调参数为 (selected, item, selectedItems)。

名称类型描述
selectedbooleantrue 表示已选择，false 则表示取消选择。
itemObject选择状态发生变化的 data 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时，将返回第一条相关的 data 数据项。
selectedItemsObject<string, Object | Array>当前所有已选项的信息，键为 key-field 对应字段，值为对应的 data 数据项。当存在纵向合并单元格且以相应行作为键进行选择时，值为所有相关行数据项组成的数组。
sort

进行排序时触发的事件。回调参数为 (field, order)。

名称类型描述
fieldstring基于哪一列进行排序。值来自对应 Column 组件的 field 属性。
orderstring | boolean同 order 属性。

全局配置

名称类型默认值描述
table.loadingOptionsObject{ type: 'bar', modal: true }加载样式配置，字段详情见 loading-options 属性。

自定义样式

名称类型默认值描述
--dls-table-head-cell-lines1 | 2 | auto1表头单元格显示的行数。
--dls-table-cell-lines1 | 2 | auto1表格内容单元格显示的行数。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024