Skip to content

Table 表格

基础用法

html
<ivy-table id="table">
    <ivy-table-column label="姓名" prop="name" width="100px"></ivy-table-column>
    <ivy-table-column
        label="日期"
        prop="date"
        min-width="120px"></ivy-table-column>
    <ivy-table-column label="地址" prop="address"></ivy-table-column>
</ivy-table>

加载中

通过设置 loading 属性来展示加载中的状态

切换状态:
html
<div style="display:flex;align-items:center;">
    切换状态:<ivy-switch id="iSwitch" checked></ivy-switch>
</div>
<ivy-table id="table1" loading>
    <ivy-table-column label="姓名" prop="name" width="100px"></ivy-table-column>
    <ivy-table-column
        label="日期"
        prop="date"
        min-width="120px"></ivy-table-column>
    <ivy-table-column label="地址" prop="address"></ivy-table-column>
</ivy-table>
<script setup>
    import { onMounted } from "vue";
    onMounted(() => {
        document.getElementById("iSwitch").addEventListener("change", (ev) => {
            const checked = ev.detail[0];
            if (checked) {
                document.getElementById("table1").setAttribute("loading", "");
            } else {
                document.getElementById("table1").removeAttribute("loading");
            }
        });
    });
</script>

Api

Table Props

名称说明类型可选值默认值
border边框boolean--
loading加载状态boolean--
loading-text加载中的提示文字string--

TableColumn Props

名称说明类型可选值默认值
prop数据源中的 keyString--
label表格的 titleString--
width表格列的宽度String--
min-width表格列的最小宽度String--

MIT Licensed