ETU组件库

Appearance

Return to top
On this page

Table 表格

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

基础表格

当 etu-table 元素中注入 data 对象数组和columns, 可以使用 width 属性来定义列宽。

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
No. 189, Grove St, Los Angeles
<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

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

<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

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

带状态表格

可以通过指定 Table 组件的 row-class 属性来为 Table 中的某一行添加 class

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
No. 189, Grove St, Los Angeles
<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :row-class="rowClass"
  ></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const rowClass = ({ rowIndex }) => {
  if (rowIndex === 1) return "warning-row";
};
</script>

<style>
.warning-row {
  --etu-table-tr-bg-color: yellow;
  --etu-bg-color: yellow;
}
</style>

<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :row-class="rowClass"
  ></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const rowClass = ({ rowIndex }) => {
  if (rowIndex === 1) return "warning-row";
};
</script>

<style>
.warning-row {
  --etu-table-tr-bg-color: yellow;
  --etu-bg-color: yellow;
}
</style>

固定表头

纵向内容过多时，可选择固定表头。

只要定义height属性，即可实现固定表头的表格。

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
No. 189, Grove St, Los Angeles
2022-12-11
Tom5
No. 189, Grove St, Los Angeles
2022-12-11
Tom6
No. 189, Grove St, Los Angeles
2022-12-11
Tom7
No. 189, Grove St, Los Angeles
<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :height="200"
  ></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom5",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom6",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom7",
    address: "No. 189, Grove St, Los Angeles",
  },
];

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

<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :height="200"
  ></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom5",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom6",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom7",
    address: "No. 189, Grove St, Los Angeles",
  },
];

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

固定列

横向内容过多时，可选择固定列。

固定列需要使用 fixed 属性 它接受传入字符串left 或 right，表示左边固定还是右边固定。

日期
姓名
年龄
地址
操作
2016-05-03
Tom0
12
No. 189, Grove St, Los Angeles
2016-05-03
Tom1
13
No. 189, Grove St, Los Angeles
2016-05-03
Tom2
14
No. 189, Grove St, Los Angeles
2016-05-03
Tom3
15
No. 189, Grove St, Los Angeles
2016-05-03
Tom4
16
No. 189, Grove St, Los Angeles
2016-05-03
Tom5
17
No. 189, Grove St, Los Angeles
<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
  ></etu-table>
</template>

<script setup lang="tsx">
import { ref } from "vue";
const columns = [
  {
    label: "日期",
    prop: "date",
    fixed: "left",
    width: 150,
  },
  {
    label: "姓名",
    prop: "name",
    width: 120,
    headerRender: () => {
      return <etu-tag>姓名</etu-tag>;
    },
    cellRender: ({ cellData: name }) => {
      return <etu-tag>{name}</etu-tag>;
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
    align: "center",
  },
  {
    label: "操作",
    prop: "config",
    width: 200,
    fixed: "right",
    cellRender: () => {
      return (
        <div>
          <etu-button type="danger">删除</etu-button>
        </div>
      );
    },
  },
];

const tableData = ref<any[]>([]);
const tableIndex = ref(6);

for (let i = 0; i < tableIndex.value; i++) {
  tableData.value.push({
    date: "2016-05-03",
    name: `Tom${i}`,
    age: 12 + i,
    address: "No. 189, Grove St, Los Angeles",
  });
}
</script>

<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
  ></etu-table>
</template>

<script setup lang="tsx">
import { ref } from "vue";
const columns = [
  {
    label: "日期",
    prop: "date",
    fixed: "left",
    width: 150,
  },
  {
    label: "姓名",
    prop: "name",
    width: 120,
    headerRender: () => {
      return <etu-tag>姓名</etu-tag>;
    },
    cellRender: ({ cellData: name }) => {
      return <etu-tag>{name}</etu-tag>;
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
    align: "center",
  },
  {
    label: "操作",
    prop: "config",
    width: 200,
    fixed: "right",
    cellRender: () => {
      return (
        <div>
          <etu-button type="danger">删除</etu-button>
        </div>
      );
    },
  },
];

const tableData = ref<any[]>([]);
const tableIndex = ref(6);

for (let i = 0; i < tableIndex.value; i++) {
  tableData.value.push({
    date: "2016-05-03",
    name: `Tom${i}`,
    age: 12 + i,
    address: "No. 189, Grove St, Los Angeles",
  });
}
</script>

固定列和表头

当您有大量数据块放入表中，您可以同时固定表头和列。

固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

日期
姓名
年龄
地址
操作
2016-05-03
Tom0
12
No. 189, Grove St, Los Angeles
2016-05-03
Tom1
13
No. 189, Grove St, Los Angeles
2016-05-03
Tom2
14
No. 189, Grove St, Los Angeles
2016-05-03
Tom3
15
No. 189, Grove St, Los Angeles
2016-05-03
Tom4
16
No. 189, Grove St, Los Angeles
2016-05-03
Tom5
17
No. 189, Grove St, Los Angeles
2016-05-03
Tom6
18
No. 189, Grove St, Los Angeles
2016-05-03
Tom7
19
No. 189, Grove St, Los Angeles
2016-05-03
Tom8
20
No. 189, Grove St, Los Angeles
2016-05-03
Tom9
21
No. 189, Grove St, Los Angeles
<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name" :height="300"></etu-table>
</template>

<script setup lang="tsx">
import { ref } from "vue";
const columns = [
  {
    label: "日期",
    prop: "date",
    fixed: "left",
    width: 150,
  },
  {
    label: "姓名",
    prop: "name",
    width: 120,
    headerRender: () => {
      return <etu-tag>姓名</etu-tag>;
    },
    cellRender: ({ cellData: name }) => {
      return <etu-tag>{name}</etu-tag>;
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
    align: "center",
  },
  {
    label: "操作",
    prop: "config",
    width: 200,
    fixed: "right",
    cellRender: () => {
      return (
        <div>
          <etu-button type="danger">删除</etu-button>
        </div>
      );
    },
  },
];

const tableData = ref<any[]>([]);
const tableIndex = ref(10);

for (let i = 0; i < tableIndex.value; i++) {
  tableData.value.push({
    date: "2016-05-03",
    name: `Tom${i}`,
    age: 12 + i,
    address: "No. 189, Grove St, Los Angeles",
  });
}
</script>

<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name" :height="300"></etu-table>
</template>

<script setup lang="tsx">
import { ref } from "vue";
const columns = [
  {
    label: "日期",
    prop: "date",
    fixed: "left",
    width: 150,
  },
  {
    label: "姓名",
    prop: "name",
    width: 120,
    headerRender: () => {
      return <etu-tag>姓名</etu-tag>;
    },
    cellRender: ({ cellData: name }) => {
      return <etu-tag>{name}</etu-tag>;
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
    align: "center",
  },
  {
    label: "操作",
    prop: "config",
    width: 200,
    fixed: "right",
    cellRender: () => {
      return (
        <div>
          <etu-button type="danger">删除</etu-button>
        </div>
      );
    },
  },
];

const tableData = ref<any[]>([]);
const tableIndex = ref(10);

for (let i = 0; i < tableIndex.value; i++) {
  tableData.value.push({
    date: "2016-05-03",
    name: `Tom${i}`,
    age: 12 + i,
    address: "No. 189, Grove St, Los Angeles",
  });
}
</script>

流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

通过设置 max-height 属性来指定最大高度。 此时若表格所需的高度大于最大高度，则会显示一个滚动条

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
<template>
  <etu-button @click="addData">添加数据</etu-button>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :maxHeight="250"
  ></etu-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";

let index = 4;
const tableData = ref([
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const addData = () => {
  tableData.value.push({
    date: "2022-12-13",
    name: `Tom${index++}`,
    address: "No. 189, Grove St, Los Angeles",
  });
};
</script>

<template>
  <etu-button @click="addData">添加数据</etu-button>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :maxHeight="250"
  ></etu-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";

let index = 4;
const tableData = ref([
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const addData = () => {
  tableData.value.push({
    date: "2022-12-13",
    name: `Tom${index++}`,
    address: "No. 189, Grove St, Los Angeles",
  });
};
</script>

多选

通过设置 row-selection 开启行选择器。

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
No. 189, Grove St, Los Angeles
<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :row-selection="rowSelection"
  ></etu-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const rowSelection = ref({
  type: "checkbox",
  showCheckedAll: true,
});
</script>

<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :row-selection="rowSelection"
  ></etu-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const rowSelection = ref({
  type: "checkbox",
  showCheckedAll: true,
});
</script>

单选

通过设置 rowSelection.type='radio' 开启单选模式。

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
No. 189, Grove St, Los Angeles
<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :row-selection="rowSelection"
  ></etu-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const rowSelection = ref({
  type: "radio",
});
</script>

<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
    :row-selection="rowSelection"
  ></etu-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];

const rowSelection = ref({
  type: "radio",
});
</script>

排序

通过设置 columns 中的 sortable属性，可以配置排序功能，修改排序方式和自定义排序函数。

日期
姓名
地址
2022-12-13
Tom1
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
No. 189, Grove St, Los Angeles
<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    label: "姓名",
    prop: "name",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];
</script>

<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    label: "姓名",
    prop: "name",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];
</script>

筛选

通过设置 columns 中的 filterable属性，可以配置筛选功能，自定义筛选方式，筛选组合形式等。

日期
姓名
年龄
地址
2022-12-13
Tom1
9
No. 189, Grove St, Los Angeles
2022-12-12
Tom2
22
No. 189, Grove St, Los Angeles
2022-12-14
Tom3
35
No. 189, Grove St, Los Angeles
2022-12-11
Tom4
53
No. 189, Grove St, Los Angeles
<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    age: 9,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    age: 22,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    age: 35,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    age: 53,
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    label: "姓名",
    prop: "name",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
    filterable: {
      filters: [
        {
          text: "Tom1",
          value: "Tom1",
        },
        {
          text: "Tom2",
          value: "Tom2",
        },
      ],
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
    filterable: {
      filters: [
        {
          text: ">10",
          value: ">10",
        },
        {
          text: "<50",
          value: "<50",
        },
      ],
      filter: (value, record) => {
        if (value === ">10") {
          return record.age > 10;
        } else if (value === "<50") {
          return record.age < 50;
        } else {
          return true;
        }
      },
      filterCombine: "and",
    },
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];
</script>

<template>
  <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    age: 9,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    age: 22,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    age: 35,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    age: 53,
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    label: "姓名",
    prop: "name",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
    filterable: {
      filters: [
        {
          text: "Tom1",
          value: "Tom1",
        },
        {
          text: "Tom2",
          value: "Tom2",
        },
      ],
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
    filterable: {
      filters: [
        {
          text: ">10",
          value: ">10",
        },
        {
          text: "<50",
          value: "<50",
        },
      ],
      filter: (value, record) => {
        if (value === ">10") {
          return record.age > 10;
        } else if (value === "<50") {
          return record.age < 50;
        } else {
          return true;
        }
      },
      filterCombine: "and",
    },
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];
</script>

自定义渲染

通过设置columns中的headerRender和cellRender，可以对列进行自定义渲染，设置headerCellClass,bodyCellClass可以为表头和单元格添加类

日期
姓名
年龄
操作
2016-05-03
Tom0
12
2016-05-03
Tom1
13
2016-05-03
Tom2
14
2016-05-03
Tom3
15
<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
  ></etu-table>
</template>

<script setup lang="tsx">
import { ref } from "vue";
const columns = [
  {
    label: "日期",
    prop: "date",
    width: 150,
  },
  {
    label: "姓名",
    prop: "name",
    width: 120,
    headerRender: () => {
      return <etu-tag>姓名</etu-tag>;
    },
    cellRender: ({ cellData: name }) => {
      return <etu-tag>{name}</etu-tag>;
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
  },
  {
    label: "操作",
    prop: "config",
    width: 200,
    cellRender: () => {
      return (
        <div>
          <etu-button type="danger">删除</etu-button>
        </div>
      );
    },
  },
];

const tableData = ref<any[]>([]);
const tableIndex = ref(4);

for (let i = 0; i < tableIndex.value; i++) {
  tableData.value.push({
    date: "2016-05-03",
    name: `Tom${i}`,
    age: 12 + i,
  });
}
</script>

<template>
  <etu-table
    :columns="columns"
    :data="tableData"
    rowKey="name"
  ></etu-table>
</template>

<script setup lang="tsx">
import { ref } from "vue";
const columns = [
  {
    label: "日期",
    prop: "date",
    width: 150,
  },
  {
    label: "姓名",
    prop: "name",
    width: 120,
    headerRender: () => {
      return <etu-tag>姓名</etu-tag>;
    },
    cellRender: ({ cellData: name }) => {
      return <etu-tag>{name}</etu-tag>;
    },
  },
  {
    label: "年龄",
    prop: "age",
    width: 100,
    align: "center",
  },
  {
    label: "操作",
    prop: "config",
    width: 200,
    cellRender: () => {
      return (
        <div>
          <etu-button type="danger">删除</etu-button>
        </div>
      );
    },
  },
];

const tableData = ref<any[]>([]);
const tableIndex = ref(4);

for (let i = 0; i < tableIndex.value; i++) {
  tableData.value.push({
    date: "2016-05-03",
    name: `Tom${i}`,
    age: 12 + i,
  });
}
</script>

table属性

属性名说明类型默认值
columns表格的列描述信息TableColumnCtx[]
data显示的数据TableData[]—
heightTable 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。string / number—
max-heightTable 的最大高度。 合法的值为数字或者单位为 px 的高度。string / number—
row-key表格行 key 的取值字段string'key'
row-class行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。function({ row, rowIndex }) / string—
row-selection表格的行选择器配置TableRowSelection—

Table 事件

事件名说明回调参数
select当用户手动勾选数据行的 Checkbox 时触发的事件rowKeys, checked, rowKey, record
select-all当用户手动勾选全选 Checkbox 时触发的事件rowKeys, checked
selection-change当选择项发生变化时会触发该事件rowKeys
select-radio当用户手动勾选数据行的 Radio 时触发的事件rowKey, record
cell-click当某个单元格被点击时会触发该事件record, column, event
row-click当某一行被点击时会触发该事件record, event
header-click当某一列的表头被点击时会触发该事件column, event
sort-change当表格的排序条件发生变化的时候会触发该事件columnProp, direction
filter-change当表格的筛选条件发生变化的时候会触发该事件columnProp, filteredValues

Table方法

方法名说明参数
getSelectionRows返回当前选中的行—
toggleRowSelection用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否rowKey, selected
toggleAllSelection用于多选表格，切换全选和全不选—
setCurrentRow用于单选表格，设定某一行为选中行rowKey
clearSort用于清空排序条件，数据会恢复成未排序的状态—

类型

TableColumnCtx

参数名描述类型
prop列信息的标识，对应 TableData 中的数据string
label列标题string
width列宽度number
align对齐方向left/center/right
fixed固定位置left/right
sortable排序相关选项TableSortable
filterable过滤相关选项TableFilterable
headerRender自定义表头渲染(data: { column: TableColumnCtx; columnIndex: number; }) => VNodeChild
cellRender自定义单元格渲染(data: { cellData: any; record: T; column: TableColumnCtx; rowIndex: number; columnIndex: number; }) => VNodeChild
headerCellClass自定义表头单元格类名ClassName /((data: { column: TableColumnCtx; columnIndex: number }) => any)
bodyCellClass自定义单元格类名ClassName /((data: { cellData: any; record: T; column: TableColumnCtx; rowIndex: number; columnIndex: number; }) => any)

TableRowSelection

参数名描述类型默认值
type行选择器的类型checkbox/radio—
showCheckedAll是否显示全选选择器booleantrue
title列标题string—
width列宽度number—
fixed是否固定booleanfalse

TableSortable

参数名描述类型默认值
sortDirections支持的排序方向('ascend' | 'descend')[]—
sorter排序函数( a: TableData, b: TableData ) => number—

TableFilterData

参数名描述类型默认值
text筛选数据选项的内容string—
value筛选数据选项的值string—

TableFilterable

参数名描述类型默认值
filters筛选数据TableFilterData[]—
filter筛选函数(value: string[], record: TableData) => boolean—
filterPlacement筛选浮动位置popper配置"bottom-start"
filterCombine筛选合并逻辑"and" / "or""or"