表格

用于展示多条结构类似的数据。本组件基于 View Design Table 封装。

基础用法

table-data 为数据，table-column 为列。

暂无筛选结果

<template>
  <ui-table :table-columns="tableColumns" :table-data="tableData" />
</template>

<script setup>
  import { ref } from 'vue';

  const tableColumns = ref([
    {
      title: 'Name',
      key: 'name',
    },
    {
      title: 'Age',
      key: 'age',
    },
    {
      title: 'Address',
      key: 'address',
    },
  ]);

  const tableData = ref([
    {
      name: 'John Brown',
      age: 18,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03',
    },
    {
      name: 'Jim Green',
      age: 24,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01',
    },
    {
      name: 'Joe Black',
      age: 30,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02',
    },
    {
      name: 'Jon Snow',
      age: 26,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04',
    },
  ]);
</script>

隐藏源代码

插槽传入

tableColumn 中设置某一列 slot 的值，在 ui-table 中传入对应插槽为 slot 的值即可。slot 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。

暂无筛选结果

<template>
  <ui-table :table-columns="tableColumns" :table-data="tableData">
    <template #address="{ row }">
      <span>{{ row.name }} is {{ row.address }}</span>
    </template>
  </ui-table>
</template>

<script setup>
  import { ref } from 'vue';

  const tableColumns = ref([
    {
      title: 'Name',
      key: 'name',
    },
    {
      title: 'Age',
      key: 'age',
    },
    {
      title: 'Address',
      slot: 'address',
    },
  ]);

  const tableData = ref([
    {
      name: 'John Brown',
      age: 18,
      address: 'New York No. 1 Lake Park',
    },
    {
      name: 'Jim Green',
      age: 24,
      address: 'London No. 1 Lake Park',
    },
    {
      name: 'Joe Black',
      age: 30,
      address: 'Sydney No. 1 Lake Park',
    },
    {
      name: 'Jon Snow',
      age: 26,
      address: 'Ottawa No. 2 Lake Park',
    },
  ]);
</script>

隐藏源代码

设置最大高度

设置 max-height 超出高度将滚动。

暂无筛选结果

<template>
  <Button class="mb-sm" @click="add">添加数据</Button>
  <ui-table
    :table-columns="tableColumns"
    :table-data="tableData"
    :max-height="300"
    :table-scroll="true"
  />
</template>

<script setup>
  import { reactive, ref } from 'vue';

  const tableColumns = ref([
    {
      title: 'Name',
      key: 'name',
    },
    {
      title: 'Age',
      key: 'age',
    },
    {
      title: 'Address',
      key: 'address',
    },
  ]);

  const tableData = reactive([
    {
      name: 'John Brown',
      age: 18,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03',
    },
    {
      name: 'Jim Green',
      age: 24,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01',
    },
    {
      name: 'Joe Black',
      age: 30,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02',
    },
  ]);

  const add = () => {
    tableData.push({
      name: 'Jon Snow',
      age: 26,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04',
    });
  };
</script>

隐藏源代码

根据上下文自适应高度

需要设置其父级元素 height: 100%; display: flex; flex-direction: column; flex: 1;

给 ui-table 设置 display: flex; flex-direction: column; flex: 1;

此处已经通过公用 class 设置 css

设备名称

暂无筛选结果

共4条记录

• 1
请选择
• 无匹配数据
• 10 条/页
• 20 条/页
• 50 条/页
• 100 条/页
加载中
• 共1页
跳至
页

<template>
  <div class="content">
    <div class="height-full auto-fill">
      <div class="mb-sm">
        <ui-label label="设备名称">
          <el-input class="width-sm" />
        </ui-label>
      </div>
      <ui-table class="auto-fill" :table-columns="tableColumns" :table-data="tableData" />
      <ui-page :total-count="tableData.length" />
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const tableColumns = ref([
    {
      title: 'Name',
      key: 'name',
    },
    {
      title: 'Age',
      key: 'age',
    },
    {
      title: 'Address',
      key: 'address',
    },
  ]);

  const tableData = ref([
    {
      name: 'John Brown',
      age: 18,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03',
    },
    {
      name: 'Jim Green',
      age: 24,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01',
    },
    {
      name: 'Joe Black',
      age: 30,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02',
    },
    {
      name: 'Jon Snow',
      age: 26,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04',
    },
  ]);
</script>
<style lang="scss" scoped>
  .content {
    height: 500px;
  }
</style>

隐藏源代码

翻页选中

全选所有页传入 is-all 为 true 即可，全选所有页之后禁止取消选中单项。需要配合 reserve-selection 属性一起使用，设置为 true 将启用翻页勾选，row-key 默认值为 id 作为翻页选中的标识符。

全选

共0条记录

• 1
请选择
• 无匹配数据
• 10 条/页
• 20 条/页
• 50 条/页
• 100 条/页
加载中
• 共1页
跳至
页

<template>
  <el-checkbox v-model="checkAll">全选</el-checkbox>
  <ui-table
    row-key="age"
    :is-all="checkAll"
    :reserve-selection="true"
    :table-columns="tableColumns"
    :table-data="tableData"
  />
  <ui-page
    v-model:pageSize="pageData.pageSize"
    v-model:pageNum="pageData.pageNum"
    :total-count="pageData.totalCount"
  />
</template>

<script setup>
  import { onMounted, reactive, ref, watch } from 'vue';
  import { pagination } from '@web-basic-doc/utils';

  let checkAll = ref(false);
  const tableColumns = ref([
    {
      type: 'selection',
      width: 60,
    },
    {
      title: 'Name',
      key: 'name',
    },
    {
      title: 'Age',
      key: 'age',
    },
    {
      title: 'Address',
      key: 'address',
    },
  ]);

  const data = reactive([
    {
      name: 'John Brown',
      age: 1,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03',
    },
    {
      name: 'Jim Green',
      age: 2,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01',
    },
    {
      name: 'Joe Black',
      age: 3,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02',
    },
    {
      name: 'Jon Snow',
      age: 4,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04',
    },
    {
      name: 'John Brown',
      age: 5,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03',
    },
    {
      name: 'Jim Green',
      age: 6,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01',
    },
    {
      name: 'Joe Black',
      age: 7,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02',
    },
    {
      name: 'Jon Snow',
      age: 8,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04',
    },
    {
      name: 'John Brown',
      age: 9,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03',
    },
    {
      name: 'Jim Green',
      age: 10,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01',
    },
    {
      name: 'Joe Black',
      age: 11,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02',
    },
    {
      name: 'Jon Snow',
      age: 12,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04',
    },
  ]);

  const pageData = reactive({
    pageNum: 1,
    pageSize: 10,
    totalCount: 0,
  });

  let tableData = ref([]);

  watch(
    () => pageData.pageNum,
    (val) => {
      tableData.value = pagination(data, val, pageData.pageSize);
    },
  );

  watch(
    () => pageData.pageSize,
    (val) => {
      pageData.pageNum = 1;
      tableData.value = pagination(data, pageData.pageNum, val);
    },
  );

  onMounted(() => {
    pageData.totalCount = data.length;
    tableData.value = pagination(data, pageData.pageNum, pageData.pageSize);
  });
</script>

隐藏源代码

属性

属性名	说明	类型	可选值	默认值
table-columns	表格列的配置描述	array	——	——
table-data	显示的结构化数据	array	——	——
loading	加载中	boolean	——	false
max-height	最大高度	number	——	——
reserve-selection	是否开启翻页选中	boolean	——	false
row-key	配合 reserve-selection 使用，作为翻页选中的标识符	string	——	id
default-storeData	配合 reserve-selection 使用，默认选中的数据	array	——	——
is-all	配合 reserve-selection 使用，全选所有页	boolean	——	false
special-jsx	空数据显示的内容	string	——	——
special-jsx	空数据显示的内容	string	——	——
透传属性	见 View Design Table	——	——	——

事件

事件名	说明	参数
cancelSelectTable	取消选中某一项	selection 已选项数据 row 取消选择的数据
storeSelectList	配合 reserve-selection 使用	storeSelectTable 翻页选中的数据
cacelAllSelectTable	点击取消全选时触发	selection 已选项数据
onSelectAllTable	点击全选时触发	selection 已选项数据
oneSelected	选中某一项	selection 已选项数据 row 刚选择的项数据
透传事件	见 View Design Table	——

插槽

名称	说明
——	对应 table-columns 单个项中 slot 的值