ivyDesign

Appearance

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>

Table Props ​

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

TableColumn Props ​

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